应用错误收集

如何覆盖在flexbox中居中的兄弟div，而不使用绝对定位？

时间：2014-10-02 23:59:03

标签： html css html5 css3 flexbox

See this plunker. 使用css flexbox最有效的方法是什么，而不是求助于绝对定位？

当前的plunker代码如下：

CSS

 .container{
  display: flex;
  align-items: center;
  justify-content: center;
  border:4px dashed red;
  height:600px;
  width:80%;
}

.under{
  background-color:yellow;
  height:80% !important;
  width:40% !important;
}

.over{
  background-color:blue;
  height:50%;
  width:20%;
}

HTML

<body>
  <div class='container'>
  <div class='under'> Under - this should be in the center of the container </div>
   <div class='over'>
    <h3>Center overlay the blue div on top of the green!</h3>
    </div>
    </div>
  </body>

1 个答案:

答案 0 :(得分：0)

有。过度添加margin-left：-100px;使它们重叠...但我不知道你为什么要这样......