在學習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佈局的特性。
