固定定位

固定定位

什么是固定定位?

固定定位和前面学习的背景关联方式很像, 背景关联方式可以让某个图片不随着滚动条的滚动而滚动, 而固定定位可以让某个盒子不随着滚动条的滚动而滚动

格式:

position: fixed;

---

固定定位注意点:

固定定位的元素是脱离标准流的, 不会占用标准流中的位置

由于固定定位的元素是脱离标准流的, 所以绝对定位的元素不区分块级元素/行内元素/行内块级元素

IE6不支持固定定位

固定定位应用场景:

网页对联广告

网页头部通栏(穿透效果)

---

z-index属性

什么是z-index值?

用于指定定位的元素的覆盖关系

定位元素的覆盖关系:

默认情况下定位的元素一定会盖住没有定位的元素

默认情况下写在后面的定位元素会盖住前面的定位元素

默认情况下所有元素的z-index值都是0, 如果设置了元素的z-index值, 那么谁比较大谁就显示在前面

定位元素的从父现象

父元素没有z-index值, 那么子元素谁的z-index大谁盖住谁

父元素z-index值不一样, 那么父元素谁的z-index大谁盖住谁

z-index应用场景

控制界面上的定位元素的覆盖关系, 例如网页中后面的定位元素不能覆盖前面的导航条通栏