Why is text displayed behind absolute positioned image with CSS?

css image position absolute z-order
Claud picture Claud · Sep 2, 2013 · Viewed 7k times · Source

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

Jimmy picture Jimmy · Nov 26, 2018

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>

Related questions

rotate image with css

I would like to rotate an image by 90 degrees with CSS only. I can do the rotation, but then the position of the image is not what it should be. First, it will overlay some other elements in the same …

Read More
vertical align center image in fixed size div

I have a div which is 145px X 145px. I have an img inside this dive. The img could be of any size (longest side being 130px). I would like the image to be centered vertically in the div. Everything …

Read More
How do I auto-resize an image to fit a 'div' container?

How do you auto-resize a large image so that it will fit into a smaller width div container whilst maintaining its width:height ratio? Example: stackoverflow.com - when an image is inserted onto the editor panel and the image …

Read More