Why does z-index not work?

html css z-index
Linkjuice57 picture Linkjuice57 · Feb 8, 2012 · Viewed 262.7k times · Source

So if I understand z-index correctly, it would be perfect in this situation:

enter image description here

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?

z-index:-1 // on the image tag/card

or

z-index:100 // on the div above

doesn't work either. Neither does a combination of anything like this. How come?

Answer

Evert picture Evert · Feb 8, 2012

The z-index property only works on elements with a position value other than static (e.g. position: absolute;, position: relative;, or position: fixed).

There is also position: sticky; that is supported in Firefox, is prefixed in Safari, worked for a time in older versions of Chrome under a custom flag, and is under consideration by Microsoft to add to their Edge browser.

Important
For regular positioning, be sure to include position: relative on the elements where you also set the z-index. Otherwise, it won't take effect.

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
Floating Div Over An Image

I'm having trouble floating a div over an image. Here is what I am trying to accomplish: In this image: I want the "Featured" box to float over top of the image but instead it seems to "clear" the float …

Read More