Overlay two Elements in Flex Box Grid

Question

I want to create a Flex Box Grid which displays elements in a row and wraps them when the maximum size is exceeded. I am able to create grid without overlaying flex box items.

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

However, I want the small rectangles to overlay the big ones. They should be placed in the top left corner of the big rectangle. Whenever I use positioning such as absolute or relative it destroys the grid though. How would I overlay elements in a flex box grid?

Gastelum

Answer 1

Give position:relative to .input-color and add position:absolute in this class .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>

Winou

Answer 2

You need position here i believe:

update CSS to apply:

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

Pau