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
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
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
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
