IFE：第7天 定位与层级

1. 定位 position

1.1 静态定位 static

每个元素的默认值，将元素放入它在文档布局流中的正常位置。

1.2 相对定位 relative

开启定位后，可以使用top、right、bottom，left四个属性设置偏移量。选择一个垂直方向和竖直方向上的偏移量即可为一个元素定位。

要点

• 相对定位的元素不会脱离文档流
• 开启相对定位后，如果不设置偏移量，元素不会发生任何变化
• 相对定位是相对于元素在文档流中原来的位置进行定位
• 相对定位会使元素提升一个层级
• 相对定位不会改变元素的性质

1.3 绝对定位 absolute

定位方式同上

要点

• 绝对定位的元素会脱离文档流

• 开启绝对定位后，如果不设置偏移量，元素不会发生任何变化

• 绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的（一般情况，开启了子元素的绝对定位都会同时开启父元素的相对定位）
  - 如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位

• 绝对定位会使元素提升一个层级

• 绝对定位会改变元素的性质

  - 内联元素变块元素
  - 块元素的宽度和高度默认都被内容撑开

1.4 固定定位 fixed

​ 定位方式同上

要点
固定定位也是一种绝对定位，大部分特点与绝对定位一致，不同的是

• 固定定位永远都会相对于浏览器窗口进行定位
• 固定定位会固定在浏览器窗口某个位置，不会随滚动条滚动
• IE6不支持固定定位

2.层级 z-index

要点

• 如果定位元素的层级是一样，则下边的元素会盖住上边的
• 层级越高，越优先显示
• 对于没有开启定位的元素不能使用z-index
• 定位的元素都具有z-index为auto，实际上为0