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>

Answer 1

将z-index: -1;应用于.LAYOUTbanner1_image_second并从.LAYOUTbanner1_image_first删除z索引。 .LAYOUTbanner1_image_second是子元素，如果子元素应位于父元素下方，则可以使用负的z-index（父元素上的 no z-index）。

Placing div over another using z-index

1 个答案: