在Flex Box网格中叠加两个元素

Question

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

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

但是，我希望小矩形覆盖大的矩形。它们应放在大矩形的左上角。每当我使用诸如positioning或absolute之类的relative时，它就会破坏grid。我如何覆盖flex box grid？

中的元素

Answer 1

将position:relative提交至.input-color并在此课程position:absolute中添加.input-color .color-box-small。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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