您的位置:首页 > 其它

position 定位相互覆盖的问题

2017-04-18 17:26 148 查看

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定位使元素的位置与文档流无关,因此不占据空间。**
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  position