定位属性

定位属性

css的定位属性有三种，分别是绝对定位，相对定位，固定定位。

position: absolute;//绝对定位
position: relative;//相对定位
position: fixed;//固定定位

相对定位

用途

1. 微调元素
2. 做绝对定位的参考，子绝父相

相对定位的定位值（负数表示相反的方向）

• left:盒子右移
• right：盒子左移
• top：盒子下移
• bottom：盒子上移

绝对定位

1. 绝对定位的盒子脱离了标准文档流

2. 绝对定位之后，标签就不区分所谓的行内元素，不需要display:block; 就可以设置宽高了。

绝对定位的参考点

1. 如果用top描述，那么参考点就是页面的左上角（并不是当前窗口的左上角），而不是浏览器的左上角。
2. 如果用bottom描述，那么参考点就是浏览器首屏（当前的窗口）窗口尺寸，对应的是页面的左下角

子绝父相 的意义：这样可以保证父亲没有脱标，子元素脱标在父亲的范围里面移动。

父元素浮动，设置相对定位（零偏移），然后让儿子绝对定位一定的距离。

z-index属性

1. 属性值大的位于上层，属性值小的位于下层。

2. Z-index 值没有单位，就是一个正整数，默认的z-index值是0。

3. 多个z-index中谁的数值大谁就在最上层。

   层级：

   1. 必须有定位（除去static）
   2. 用 z-index来控制层级数。