在学习flex布局时，发现一个很奇妙的特性记录一下。
<html>
<head>
<style type="text/css">
.div{
margin: 0% 0% 0% 0%;
padding: 0% 0% 0% 0%;
}
body{
position:absolute;
top: 50px;
}
.outer{
top: 50px;
border: 2px solid green;
}
.div1{
display: flex;
justify-content: center;
align-items: center;
border: 2px solid purple;
box-sizing: border-box;
margin-top: 100px;
width: 1000px;
height: 1000px;
}
.div2{
width: 500px;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid red;
box-sizing: border-box
}
.div3{
position: absolute;
top: 0px;
left: 0px;
border: 2px solid blue;
}
</style>
</head>
<body>
<div class='outer'>
<div class='div1'>
<div class='div2'>
<div class=div3>
123123123
</div>
</div>
</div>
</div>
</body>
</html>
当我们在flex布局的子元素中使用absolute时，他会向上找到第一个position进行对齐，表示资源放弃flex布局的特性。
扫一扫
4624
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
