绝对定位 和 float 的层级
在写代码的无意中,对有相同的父元素的不同的两个元素同时使用了position absolute 和float 定位,发现了如下效果:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,shrink-to-fit=no">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta name="msapplication-tap-highlight" content="no">
<style>
body{
margin:0;
}
.box{
width:100vw;
height:100vh;
position: relative;
background: #333;
}
.absoluteBox{
width:200px;
height:100px;
position: absolute;
left:0;
top:0;
background: #ff0000;
}
.box span{
width:300px;
height:100px;
float:left;
/*display: inline-block;*/
background: #0f0;
}
</style>
</head>
<body>
<div class="box">
<div class="absoluteBox" >我是绝对定位</div>
<span class="spanBox">wo wow wo wow ow wo我是float left</span>
</div>
</body>
<script>
var spanBox = document.getElementsByClassName('spanBox')[0];
spanBox.onclick = function(){
alert('哈哈哈');
}
</script>
</html>
运行的执行结果 如图 绝对定位始终在浮动定位的上面
再次改动层级
.absoluteBox{
width:200px;
height:100px;
position: absolute;
left:0;
top:0;
background: #ff0000;
z-index: 1;//改变层级
}
.box span{
width:300px;
height:100px;
float:left;
/*display: inline-block;*/
background: #0f0;
z-index: 2;//改变层级
}
运行结果同样如上,可看出同样是脱离文档流,可position absolute 在float 的层级之上;
将float 改成display 为inline-block 和block ,更加改变不了position absolute 元素和 在文档流上的元素 的层级了。
因此,在同一父元素里面,尽量避免absolute 和float 定位 同时使用。以免造成不必要的层级混乱问题。