Как наложить полимерный гибкий div

Я использую стили полимерной тени для использования гибких элементов div. . Я следил за этими ответами о том, как наложить 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>

Если я использую относительную/абсолютную позицию из классов flex-shadow-dom, она работает правильно:

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

Итак, как я могу наложить один div поверх другого, когда оба находятся внутри гибкого контейнера?


html css flexbox polymer polymer-1.0
person Mario Levrero    schedule 07.08.2015    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вам просто нужно сделать 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>

См. этот обновленный plunkr.

Обратите внимание, что в Polymer <div class="relative"></div> совпадает с

div {
    position: relative;
}

<div class="fit"></div> совпадает с

div {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
person Justin XL    schedule 07.08.2015