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>