Name Involving Word Meow Name Involving Word Meow - 1 year ago 75
HTML Question

Layering images on top of each other causes CSS Grid to not wrap to the next row properly

The classes I'm attempting to use to layer images are in some way causing my CSS grid class

svgGrid
to malfunction and wrap back to the first column without changing to the next row.



.svgGrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
min-width: 0px;
min-height: 0px;
grid-gap: 0px;
font-size: 0px;
background-color: #534e5b;
}

.imgContainer {
position: relative;
}

.imgContainer .layer0 {
position: absolute;
top: 0;
left: 0;
z-index: 0;
}

.imgContainer .layer1 {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}

img {
height: auto;
width: auto;
max-width: 100%;
}

<div class="svgGrid">
<div class="imgContainer">
<img src="https://image.flaticon.com/icons/svg/58/58904.svg" class="layer0" />
<img src="https://s.cdpn.io/3/kiwi.svg" class="layer1">
</div>
<div class="imgContainer">
<img src="https://image.flaticon.com/icons/svg/58/58904.svg" class="layer0" />
<img src="https://s.cdpn.io/3/kiwi.svg" class="layer1">
</div>
<div class="imgContainer">
<img src="https://image.flaticon.com/icons/svg/58/58904.svg" class="layer0" />
<img src="https://s.cdpn.io/3/kiwi.svg" class="layer1">
</div>
<div class="imgContainer">
<img src="https://image.flaticon.com/icons/svg/58/58904.svg" class="layer0" />
<img src="https://s.cdpn.io/3/kiwi.svg" class="layer1">
</div>
<div class="imgContainer">
<img src="https://image.flaticon.com/icons/svg/58/58904.svg" class="layer0" />
<img src="https://s.cdpn.io/3/kiwi.svg" class="layer1">
</div>
<div class="imgContainer">
<img src="https://image.flaticon.com/icons/svg/58/58904.svg" class="layer0" />
<img src="https://s.cdpn.io/3/kiwi.svg" class="layer1">
</div>
<div class="imgContainer">
<img src="https://image.flaticon.com/icons/svg/58/58904.svg" class="layer0" />
<img src="https://s.cdpn.io/3/kiwi.svg" class="layer1">
</div>
<div class="imgContainer">
<img src="https://image.flaticon.com/icons/svg/58/58904.svg" class="layer0" />
<img src="https://s.cdpn.io/3/kiwi.svg" class="layer1">
</div>
</div>





Removing the
layer0
and
layer1
classes fixes the issue, but for obvious reasons is not desirable.

JSFiddle that demonstrates the effect: https://jsfiddle.net/kv00txzk/4/

As shown the images tile correctly across the first row, which is defined as 5 fractions of the screen. Then, rather than wrapping down to the second row and continuing for the final 4, it wraps back to the first column and draws the images again in the same place as before.

The goal would be for the image containers to wrap to the next row after each column, as well as include layered images.

Answer Source

Absolute positioning takes an element out of the regular flow. Keep the first layer in-flow with position: relative;, and use position: absolute; for the next layer only.

Is this what you are looking for?

.svgGrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  min-width: 0px;
  min-height: 0px;
  grid-gap: 0px;
  font-size: 0px;
  background-color: #534e5b;
}

.imgContainer {
    position: relative;
}

.imgContainer .layer0 {
  position: relative;
  top: 0;
  left: 0;
  z-index: 0;
}

.imgContainer .layer1 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

img {
  height: auto;
  width: auto;
  max-width: 100%;
}
<div class="svgGrid">
        <div class="imgContainer">
          <img src="https://image.flaticon.com/icons/svg/58/58904.svg" class="layer0" />
          <img src="https://s.cdpn.io/3/kiwi.svg" class="layer1">
        </div>
        <div class="imgContainer">
          <img src="https://image.flaticon.com/icons/svg/58/58904.svg" class="layer0" />
          <img src="https://s.cdpn.io/3/kiwi.svg" class="layer1">
        </div>
        <div class="imgContainer">
          <img src="https://image.flaticon.com/icons/svg/58/58904.svg" class="layer0" />
          <img src="https://s.cdpn.io/3/kiwi.svg" class="layer1">
        </div>
        <div class="imgContainer">
          <img src="https://image.flaticon.com/icons/svg/58/58904.svg" class="layer0" />
          <img src="https://s.cdpn.io/3/kiwi.svg" class="layer1">
        </div>
        <div class="imgContainer">
          <img src="https://image.flaticon.com/icons/svg/58/58904.svg" class="layer0" />
          <img src="https://s.cdpn.io/3/kiwi.svg" class="layer1">
        </div>
        <div class="imgContainer">
          <img src="https://image.flaticon.com/icons/svg/58/58904.svg" class="layer0" />
          <img src="https://s.cdpn.io/3/kiwi.svg" class="layer1">
        </div>
        <div class="imgContainer">
          <img src="https://image.flaticon.com/icons/svg/58/58904.svg" class="layer0" />
          <img src="https://s.cdpn.io/3/kiwi.svg" class="layer1">
        </div>
        <div class="imgContainer">
          <img src="https://image.flaticon.com/icons/svg/58/58904.svg" class="layer0" />
          <img src="https://s.cdpn.io/3/kiwi.svg" class="layer1">
        </div>
      </div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download