css定位

css定位

1、定位 : 将元素固定到指定的位置上,包括定位模式和边偏移

定位模式:相对定位(自恋型)、绝对定位(拼爹型)、固定定位(认死理)
边偏移:顶、左、右、底(top,left,right,bottom)
 
(1)相对定位: 相对于元素本身位置  position:  relative; top: 30px; left:100px;
        1. 定义:相对于元素本身的位置
        2. 特点:不脱离标准流(占位置),可脱离父元素
 (2)绝对定位:position:  absolute; top: 30px; left:100px;
  1、如果父元素没有定位,就是相对于视口 viewport
  2、如果父元素有相对定位,就是相对于父元素定位,可脱离父元素的范围
   特征: 脱离标准流,不占位置固定定位

(3)固定定位:相对于浏览器窗口  position: fiexd

   特征: 脱标、不占位

  添加定位后的元素自动转化为行内块状元素

(4)叠放次序:z-index:数字

  1、z-index 默认属性值是0,取值如越大,定位元素在层叠元素中越居上

  2、如果取值相同,则根据书写顺序,后来居上

  3、z-index 后数字不能加单位

  4、只有相对定位、绝对定位、固定定位有此属性,标准流、浮动、静态定位都无此属性,故不可指定该属性。

(5)静态定位:  position: static

  1、就是网页中所有元素都默认的是静态定位哦! 其实就是标准流的特性。

  2、在静态定位状态下,无法通过边偏移属性(top、bottom、left或right)来改变元素的位置。

2、区别

 
定位模式
是否脱标占有位置
是否可以使用边偏移
移动位置基准
静态static
不脱标,正常模式
不可以
正常模式
相对定位relative
不脱标,占有位置
可以
相对自身位置移动(自恋型)
绝对定位absolute
完全脱标,不占有位置
可以
相对于定位父级移动位置(拼爹型)
固定定位fixed
完全脱标,不占有位置
可以
相对于浏览器移动位置(认死理型)

css定位

上一篇:iostat详解


下一篇:用代码移动桌面图标(贪吃蛇)