在 Flex Box Grid 中叠加两个元素

Question

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

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

但是，我希望小矩形覆盖大矩形。它们应该放置在大矩形的左上角。每当我使用positioning诸如absolute或relative它会破坏grid虽然。我如何覆盖 a 中的元素flex box grid？

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