定位流之z-index属性
1.固定定位是脱离标准流的,不会占用标准流的空间
2.和绝对定位有点像,也不区分行内块级元素
3.类似于前面学的背景关联方式(让某个背景图片不随滚动而滚动)让某个元素不随着滚动条的滚动而滚动
ie6不支持固定定位
定义:默认情况所以元素的z-index属性是0;
作用是专门用于控制定位流元素的覆盖关系的
默认情况下定位流的元素会盖住标准流的元素
后面编写的定位流会盖住前面编写的定位流元素
在企业开发中:可能不止一次用了定位流,而根据定位流的性质,很有可能后面的元素会盖住前面的元素从而影响整个布局,为了解决这个问题,引入了z-index属性,元素z-index属性大的会覆盖属性小的元素
从父原则:当子元素的父元素有z-index属性时,比较会看父元素的属性而子元素设置的属性就无效了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定位流中的z-index属性</title> <style> *{ margin: 0px; padding: 0px; } div{ width: 100px; height: 100px; } .box1{ background-color: yellow; position: relative; top: 50px; left: 50px; z-index: 3; } .box2{ background-color: red; position: absolute; top: 100px; left: 100px; z-index: 1; } .box3{ background-color: green; position: fixed; top: 150px; left: 150px; z-index: 2; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </body> </html>