如何覆盖聚合物柔性div

Question

我使用聚合物阴影样式来使用flex。我一直在跟踪这些关于如何覆盖div的答案。但是，一旦我设置了一个具有绝对位置的“柔性”div，一切都是混乱的。

我做了柱塞，你可以在那里复制它。

我的代码看起来是：

<div class="layout horizontal">
    <div class="flex" style="background-color:red"></div>
    <div class="flex-5">
      <div class="flexContainer">
        <!--Following two divs should be overlayed-->
        <div style="background-color:papayawhip">---------------</div>
        <div class="content">Data</div>
      </div>
    </div>
  </div>

如果我使用的位置相对/绝对的影子-多玛灵活类，它的工作正常：

  <div>
    <div style="background-color:papayawhip; position:absolute">---------------</div>
    <div class="content" style="position:absolute">Data</div>
  </div>

那么，当两个div都在一个flex容器中时，如何将一个div覆盖在另一个div之上呢？

Answer 1

您只需要使您的flex-5 div relative和两个内部div的fit。

<div class="flex-5 relative">
    <div class="fit" style="background-color:papayawhip">---------------</div>
    <div class="fit">Data</div>
  </div>
</div>

请参阅此更新的普鲁克尔。

请注意，在聚合物中，<div class="relative"></div>与

div {
    position: relative;
}

<div class="fit"></div>与

div {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}