Placing div over another using z-index

Question

I'm trying to place the div with red outline over the one with yellow outline but I'm having issues, despite both divs having a position the yellow one sticks over the red one.

Any ideas?

.LAYOUTbanner1_maincontainer {
  width: 100%;
  height: auto;
  display: flex;
  margin: 40px 0px;
}

.LAYOUTbanner1_image_container {
  width: 45%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.LAYOUTbanner1_image_first {
  width: 250px;
  height: 250px;
  outline: 1px solid red;
  margin: 40px 0px;
  position: relative;
  background-size: cover;
  background-position: center;
  z-index: 2;
}

.LAYOUTbanner1_image_second {
  width: 250px;
  height: 250px;
  outline: 1px solid yellow;
  position: absolute;
  background-size: cover;
  background-position: center;
  top: 50px;
  left: 50px;
  z-index: 1;
}

@media only screen and (max-width: 736px) {}

<section class="LAYOUTbanner1_maincontainer">
    <div class="LAYOUTbanner1_image_container">
        <div class="LAYOUTbanner1_image_first" style="background-image:url('/img/misc/default.jpg');">
            <div class="LAYOUTbanner1_image_second" style="background-image:url('/img/misc/default.jpg');"></div>    
        </div>
    </div>
</section>

Johannes · Answer 1 · 2019-05-10T00:43:59.667

0

Apply z-index: -1; to .LAYOUTbanner1_image_second and erase the z-index from .LAYOUTbanner1_image_first. .LAYOUTbanner1_image_second is the child element, and if the child should be under the parent, you can use a negative z-index (and no z-index on the parent).

edited May 10 '19 at 00:43

answered May 09 '19 at 18:50

Johannes

64,305
18
73
130

this won't work because the parent has a z-index different from auto (https://stackoverflow.com/questions/54897916/why-cant-an-element-with-a-z-index-value-cover-its-child) – Temani Afif May 10 '19 at 00:03
@TemaniAfif I meant it differently - edited my answer accordingly – Johannes May 10 '19 at 00:44

Placing div over another using z-index

1 Answers1