0

Lets say I have two divs - or any other kind of block elements (without any positioning)
Both divs are below each other, but the div below has a negative margin.
In this case the div below overlaps the upper div.

That makes sense to me, because the lower div is painted second.
However, if I use z-index to get the downer div overlap the upper one, this does not seem to work.

You can find a simple codepen here.

<body>
   <div class="upper">

   </div>
   <div class="downer">

   </div>
</body>

.upper {
  background-color: yellow;
  height: 200px;
  width: 200px;
  z-index: 10;
}
.downer {
  z-index: 0; //Should make the second div overlap the first one.
  margin-top: -100px;
  height: 200px;
  width: 300px;
  background-color: green;
}

Why is that? I thought z-index was made for this?
How can I change the order of both elements without using any positioning and z-index?

David Mason
  • 915
  • 1
  • 9
  • 27
  • 2
    You'll need to add a `position` rule to `.upper` in order for `z-index` to work. e.g. `position: relative;` See https://developer.mozilla.org/en-US/docs/Web/CSS/z-index for more info. – WOUNDEDStevenJones Sep 06 '22 at 13:34
  • As WOUNDEDStevenJones said, `z-index` requires a [position to be defined to work](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index) – disinfor Sep 06 '22 at 13:36

0 Answers0