Z-index not working as expected working with picture and background-div

html css z-index
OptimusCrime picture OptimusCrime · Nov 15, 2011 · Viewed 23k times · Source

I have a image, and I'd like to have an effect on my page where a background-div with gray color is displayed 5px on the left side and bottom of the picture. But for some reason, I can't get the background-div to align behind the picture. It always lays ontop. How can I fix this?

Jsfiddle: http://jsfiddle.net/3Z7m4/2/

Answer

Jarno Argillander picture Jarno Argillander · Nov 15, 2011

Add position: relative; into the img CSS.

See: http://www.w3schools.com/cssref/pr_pos_z-index.asp

Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

Related questions

Bring element to front using CSS

I can't figure out how to bring images to front using CSS. I've already tried setting z-index to 1000 and position to relative, but it still fails. Here's example-

Read More
Minimum and maximum value of z-index?

I have a div in my HTML page. I am showing this div based on some condition, but the div is displaying behind the HTML element where I pointed the mouse cursor. I have tried all values for z-index from 0 …

Read More
Why does z-index not work?

So if I understand z-index correctly, it would be perfect in this situation: I want to place the bottom image (the tag/card) below the div above it. So you can't see the sharp edges. How do I do this? …

Read More