Waarom werkt Z-index niet?

Dus als ik z-indexcorrect begrijp, zou het in deze situatie perfect zijn:

Ik wil de onderste afbeelding (de tag / kaart) onder de DIV erboven plaatsen. Dus je kunt de scherpe randen niet zien. Hoe doe ik dit?

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

of

z-index:100 // on the div above

werkt ook niet. Geen enkele combinatie van zoiets. Hoe gaat het?

1, Autoriteit 100%

De z-indexEigenschap werkt alleen op elementen met een positionValue anders dan static(bijv. position: absolute;, position: relative;of position: fixed).

Er is ook position: sticky;die wordt ondersteund in Firefox, wordt voorgevoegd in Safari, werkte voor een tijd in oudere versies van Chrome onder een aangepaste vlag en is in overweging door Microsoft om toe te voegen naar hun randbrowser.

belangrijk
Zorg voor regelmatige positionering, controleer dan position: relativeop de elementen waar u ook de z-indexinstelt. Anders wordt het niet van kracht.

2, Autoriteit 17%

Als u de positie instelt naar een andere waarde dan staticmaar uw element z-indexlijkt nog steeds niet te werken, kan het zijn dat een ouder element z-indexSET.

De stapelcontexten hebben een hiërarchie en elke stapelcontext wordt beschouwd in de stapelvolgorde van de stapelcontext van de ouder.

Dus met volgende html

div { border: 2px solid #000; width: 100px; height: 30px; margin: 10px; position: relative; background-color: #FFF; }
#el3 { background-color: #F0F; width: 100px; height: 60px; top: -50px; }

<div id="el1" style="z-index: 5"></div>
<div id="el2" style="z-index: 3">
  <div id="el3" style="z-index: 8"></div>
</div>