Why does z-index not work

Question

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? Have tried the following two alternatives:-

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

and, 

z-index:100 // on the div above

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

Answer 1

The z-index property only works on elements with a position value other than static for e.g. position: absolute or position: fixed). There is also a 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.