定位层——css定位属性position及相关属性
2018-01-10 本文已影响2人
NiceBlueChai
定位属性： position
作用：规定html元素的定位类型
| 值 | 说明 | 参照对象 |
|---|---|---|
| static | （默认值）静态定位 | 无定位，html元素出现在默认文档流中，是默认的定位方式 |
| absolute | 绝对定位 | 相对于非static的第一个父元素进行定位 |
| relative | 相对定位 | 相对于自身在默认文档流中的正常位置进行定位 |
| fixed | 绝对定位 | 相对于浏览器窗口进行定位（即使窗口滚动也不会动） |
相关属性：
当html元素（标签）被设置成定位层（非static）之后。可以激活定位相关的属性设置。
| 属性 | 说明 |
|---|---|
| top | 规定元素的上边界与参考对象之间的距离偏移 |
| right | 规定元素的右边界与参考对象之间的距离偏移 |
| bottom | 规定元素的下边界与参考对象之间的距离偏移 |
| left | 规定元素的左边界与参考对象之间的距离偏移 |
- 这四个定位属性均可以使用负值。同方向有冲突时，以top、left优先。
| 属 性 | 说明 |
|---|---|
| z-index | 规定定位元素的堆叠顺序，拥有更高顺序的元素总会处于较低顺序的元素的前面 |
- z-index的值是指定顺序关系，因此是number数字形式，没有单位。
- z-index的值允许设置位负值。当设置为负值时定位层处于默认文档流下方会被覆盖。
