flexbox

flex布局与绝对定位的关系演示

by Mike Lin

HTML

<div class="container">
  <div class="c1">Content 1</div>
  <div class="c2">Content 2</div>
</div>

CSS

div.container {
  display: flex;
  flex-direction: column;
  width: 400px;
  height: 300px;
  align-items: center;
  justify-content: center;
  outline: 1px solid;
  position: relative;
}

div.c1 {
  background: #aaeecc;
  width: 100px;
  position: relative;
  z-index: 50;
  top: 20px;
  display: flex;
}

div.c2 {
  background: #cceeaa;
  width: 200px;
  position: relative;
  z-index: 50;
  top: 20px;
  display: flex;
}

.container:after {
  content: '';
  background: #ccc;
  width: 100px;
  height: 100px;
  z-index: 0;
  // 这个left注释与不注释区别很大
  // 目前在chrome61版本下注释掉，after
  // 这块是会居中，如果注释去掉，则按照left
  // 指定的值进行偏移。但是在ios10的系统上，
  // 此时的居中便失去了效果，所以这种系统兼容性的
  // 写法就不要写了
  // left: 0px; 
  top: 0px;
  position: absolute;
  display: flex;
}