如何覆盖聚合物 flex div

【问题标题】：How to overlay polymer flex div如何覆盖聚合物 flex div
【发布时间】：2015-08-07 19:18:08
【问题描述】：

我正在使用 polymer-shadow styles 来使用 flex div。我已经关注these answers on How to overlay div。但是，一旦我设置了一个具有绝对位置的 'flexed' div，一切都变得混乱了。

我做了a plunkr 在那里你可以复制它。

我的代码如下：

<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>

如果我在 shadow-dom flex 类中使用相对/绝对位置，它可以正常工作：

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

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

【问题讨论】：

标签： html css polymer flexbox polymer-1.0

【解决方案1】：

你只需要让你的flex-5divrelative和两个内部divsfit。

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

请查看更新后的plunkr。

请注意，在 Polymer 中，<div class="relative"></div> 与

div {
    position: relative;
}

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

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

【讨论】：