0

According to this, non-positioned elements stack in the same order than their appearance in the html doc. Then, this :

<body>
   <img src= 'img3.jpg'>
  <div class = 'square' > </div>
</body>

and this :

.square {
  width: 50px;
  height: 50px;
  background-color: green;
  margin-top: -20px;
  border: 5px red solid;
}

should display the image on the bottom of the z-axis and the div on the top

But, as you can see it doesn't : random image with a green square with red borders on the bottom, the square is partly behind (hidden) by the image

I am not trying to achieve something in particular, I'd just want to be able to anticipate the stacking behaviour when there is no z-index.

I would highly appreciate your help

Thanks in advance

niobium
  • 1

0 Answers0