在弹性框网格中叠加两个元素

Question

我想创建一个Flex Box Grid，在row中显示元素，并在超过最大大小时wraps它们。我能够在不叠加flex box items的情况下创建grid.

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

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

Answer 1

给.input-color position:relative，并在此类中添加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>

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>