flex和absolute的巧妙碰撞

在学习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布局的特性。

flex和absolute的巧妙碰撞_第1张图片

你可能感兴趣的:(前端开发)