一、定位模式(4种):
在css中, position属性用语定义元素的定位模式,其语法的格式为:
选择器 { position:属性值;}
其中position属性的常用值分为以下四种:
- static : 自动(静态)定位(默认定位方式)。
- relative :相对定位,相对于其原来位置的左上角为定位原点;不脱标,保留位置。
- absolute:绝对定位,当没有父级或者父级没有定位时,以浏览器当前窗口为准;如果父级有定位,则以父级的左上角为定位原点;不保留位置,完全脱标。
- fixed:固定定位,始终以浏览器窗口为准,不受父级的影响;不保留位置,完全脱标。
总结:
在写”盒子”的时候我们一般是这样使用:
这句话的意思是 子级是绝对定位的话, 父级要用相对定位。
首先, 我们说下, 绝对定位是将元素依据最近的已经定位绝对、固定或相对定位)的父元素(祖先)进行定位。
就是说, 子级是绝对定位,父亲只要是定位即可(不管父亲是绝对定位还是相对定位,甚至是固定定位都可以),就是说, 子绝父绝,子绝父相都是正确的。
二、边偏移
- top: 顶端偏移量,定义元素相对于其父元素上边线的距离。
-
left: 左侧偏移量,定义元素相对于其父元素左边线的距离。
-
right: 右侧偏移量,定义元素相对于其父元素右边线的距离
在今后的使用时,定位要和这边偏移搭配使用,比如:
1 1 position: relative; /* 相对位移*/ 2 2 top: 100px; /* 相对父级元素顶线的距离 100px */ 3 3 left: 100px; /* 相对父级元素左边线的距离 100px */