position 定位相互覆盖的问题

最新推荐文章于 2025-06-27 21:42:04 发布

原创最新推荐文章于 2025-06-27 21:42:04 发布 · 6.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#position

css 专栏收录该内容

4 篇文章

订阅专栏

position 定位相互覆盖的问题

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>定位层的相互覆盖问题</title>
</head>
<style>
.red,.blue,.green{ width: 200px; height: 200px; }
.red { background-color: red; }
.blue { background-color: blue; position: relative; top: -100px; z-index: 3;}
.green { background-color: green; position: relative; top: -200px; z-index: 2;}
.left,.right{width:20px; height: 20px; background-color: white;}
.left {  position: absolute; top: 0px;left: 0px; z-index: 99;}
.right {  position: absolute; top: 0px;right: 0px; z-index: 9999;}
</style>
<body>
	<div class="red">这是一个没有定位的块</div>
	<div class="blue">这个块是根据其正常位置向上移动<div class="left"></div></div>
	<div class="green">这个块是根据其正常位置向上移动<div class="right"></div></div>
</body>
</html>

这里写图片描述

定位覆盖的优先级还是先取决于父辈元素的z-index的大小（拼爹），然后才是自己的z-index的大小。
另外，
相对定位relative元素的定位是相对其正常位置进行移位，不脱离文档流，它原本所占的空间不会改变；
绝对定位absolute元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于body，absolute定位使元素的位置与文档流无关，因此不占据空间。