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>
原文地址：https://www.cnblogs.com/myErebos/p/8588074.html
时间： 2024-08-16 18:55:29