在 Flex Box Grid 中叠加两个元素答案

【问题标题】：Overlay two Elements in Flex Box Grid在 Flex Box Grid 中叠加两个元素
【发布时间】：2018-03-30 05:22:30
【问题描述】：

我想创建一个Flex Box Grid，它在超过最大尺寸时显示row 和wraps 中的元素。我能够在不覆盖flex box items 的情况下创建grid。

但是，我希望小矩形覆盖大矩形。它们应该放在大矩形的左上角。每当我使用positioning（例如absolute 或relative）时，它都会破坏grid。如何在flex box grid 中叠加元素？

【问题讨论】：

【解决方案1】：

将position:relative 给.input-color 并在这个类中添加position:absolute .input-color .color-box-small。

.grid {
  display: flex;
  flex-Direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.input-color .color-box-small {
  width: 10px;
  height: 10px;
  display: inline-block;
  background-color: #ccc;
  position: absolute;
}

.input-color .color-box-large {
  width: 290px;
  height: 40px;
  display: inline-block;
  background-color: #ccc;
}
.input-color {
  position: relative;
}

<div class="grid">

<div class="input-color">
  <div class="color-box-small" style="background-color: orange;"></div>
  <div class="color-box-large" style="background-color: green;"></div>
</div>

<div class="input-color">
  <div class="color-box-small" style="background-color: white;"></div>
  <div class="color-box-large" style="background-color: black;"></div>
</div>

<div class="input-color">
  <div class="color-box-small" style="background-color: navy;"></div>
  <div class="color-box-large" style="background-color: steelblue;"></div>
</div>

<div class="input-color">
  <div class="color-box-small" style="background-color: orange;"></div>
  <div class="color-box-large" style="background-color: green;"></div>
</div>

</div>

【讨论】：

【解决方案2】：

我相信你需要在这里的位置：

更新 CSS 以应用：

.input-color {
  position: relative;
}

.input-color .color-box-small {
  position: absolute;
  top: 0;
  left: 0;
}

https://jsfiddle.net/2ykn7jLs/3/

.grid {
  display: flex;
  flex-Direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.input-color {
  position: relative;
}

.input-color .color-box-small {
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  display: inline-block;
  background-color: #ccc;
}

.input-color .color-box-large {
  width: 290px;
  height: 40px;
  display: inline-block;
  background-color: #ccc;
}

<div class="grid">

  <div class="input-color">
    <div class="color-box-small" style="background-color: orange;"></div>
    <div class="color-box-large" style="background-color: green;"></div>
  </div>

  <div class="input-color">
    <div class="color-box-small" style="background-color: white;"></div>
    <div class="color-box-large" style="background-color: black;"></div>
  </div>

  <div class="input-color">
    <div class="color-box-small" style="background-color: navy;"></div>
    <div class="color-box-large" style="background-color: steelblue;"></div>
  </div>

  <div class="input-color">
    <div class="color-box-small" style="background-color: orange;"></div>
    <div class="color-box-large" style="background-color: green;"></div>
  </div>

</div>

【讨论】：