Search code examples
htmlcssz-index

Why does z-index not work?

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?

Solution

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

    Note that position: sticky; is prefixed in Safari 7.1-12 and not available on many browsers before 2016.