之前问的那个body将header覆盖掉的问题的延续
第一个div的position为fixed相当于header,第二个position为static(默认值,结果第一个div覆盖第二个div
第一个div的position为fixed，第二个div改为relative，结果第二个div覆盖第一个，
所以覆盖关系是relative覆盖fixed,fixed覆盖static?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>fixed浮在static上</title>
<style type="text/css">
.one{background: pink;
position: fixed;
width: 100%;
height: 100px;
}
.two{position: static;
width: 100%;
float: left;
background: orange;
height: 100px;
}
</style>
</head>
<body>
<div class="one">我是header</div>
<div class="two">我是body</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>relative浮在fixed上</title>
<style type="text/css">
.one{background: pink;
position: fixed;
width: 100%;
height: 100px;
}
.two{position: relative;
width: 100%;
background: orange;
height: 100px;
}
</style>
</head>
<body>
<div class="one">我是header</div>
<div class="two">我是body</div>
</body>
</html>
正在回答 回答被采纳积分+1
同学你好，1、第一个div的position为fixed相当于header,第二个position为static的时候，第一个覆盖第二个是因为固定定位，元素脱离文档流，导致第二个元素上移，就算第二个元素没有定位的话，第一个元素还是会覆盖第二个元素哦。
2、首先要明白一个即：z-index只能在position属性值为relative或absolute或fixed的元素上有效。
所以这里元素添加position: relative;属性后，z-index属性开始起作用。所以这两个元素的z-index属性都是有效的。根据由上而下的布局，所以下面的元素比上面元素的层级高，所以第二个元素把第一个元素覆盖了，所以不能说是relative覆盖fixed哦。
因为如果添加第三个元素，并把top设置为0，它会把第二个也覆盖掉，例：
所以这里的覆盖是跟层级，z-index有关的，也可以测试把第一个元素的z-index属性设置大一些，会覆盖后面的两个元素哦。
希望能帮助到你，欢迎采纳。
祝学习愉快！
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星