Overlap items between different stacking contexts
I'm trying to have a button that is within a lower stacking context than an image - to overlap it. Is it possible? This button gets overlapped by the image that is in a higher stacking context. I tried restructuring the HTML but it's not really working out since I also have a slanted background that is absolutely positioned..
I tried setting up a codepen to play around with - however it's working there.. no idea what I'm doing right/wrong. I of course tried using z-index and changing the positioning to relative, both on the <a> and the containers above it, however nothing is working (on the live site)^
Image of the elements in question: https://i.gyazo.com/bf463a0d6967d105a435dec49dd2b4d0.png
Live site: https://hbf.samuraj.oderland.agency/
Codepen (where it's actually working..) https://codepen.io/markus-b/pen/XWYrEMz
Markus Bergman
Samuraj | Startsida
Var tjugonde barn överlever inte ett medfött hjärtfel, och för den som klarar sig innebär det ofta komplikationer livet ut. Vi arbetar för att ge varje
2 Replies
Do i understand correctly, that you want those red circles to be over your background-image and ::before, but behind the text and button?
In your codepen you have no element that creates a stacking context, so your img and button are in the same stacking context (which is the <html>). So your button will be above if it has an equal or higher z-index. (because it comes after the img in the HTML)
If you make your section relative and remove the z-index from the .cta-block--contain__bg-wrapper you can use z-index for the contained elements. You may have to put that background-img into an <img> or as background-image to an extra element.
If i am correct, giving an element an z-index creates a new stacking context, so all elements inside can not float out.
Thanks @daswolle, you understood me correctly giving it another go 🙂
Wow that did it! I thought z-index was set to 0 by default, but now I have a better understanding how it works. Many thanks @daswolle 🙂