Which element overlaps which if margin has a negative value

David Mason 0
Viewed 21

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?

css
0 Answers
Related