Why is text displayed behind absolute positioned image with CSS?

Question

Using this HTML, I can't figure why the text displays behind the image:

<div style="position: relative">
<img src="image_url_here" style="position:absolute; top: 10px; left: 10px;" />  
This is some text, drawn on the page after the image, why is it drawn behind the image?
</div>

?

Tested in Chrome on Mac & PC and IE on PC.

Answer 1

It's because you set the image's position to absolute.

Answer 2

Refer this https://developer.mozilla.org/en-US/docs/Web/CSS/position

Try this or set as per your requirement

<div style="position: relative">
<img src="image_url_here" style="position:relative; top: 10px; left: 10px;" />  
This is some text, drawn on the page after the image, why is it drawn behind the image?
</div>

Answer 3

This article can answer your question: z-index explained

TL;DR: Positioned elements are stacked over non-positioned elements, so just add position: relative to the text you want stacked on top.

<div style="position: relative">
    <img src="https://via.placeholder.com/150" style="position:absolute; left: 10px;" />  
    <span style="position:relative">This is some text</span>
</div>

Answer 4

Might be a bit toooo late to answer, but could be useful for somebody: The solution is to set z-index: -1; to the image. Probably should wrap text in <p>.