CSS Full-bleed effect stacking issue
I was using this CSS full-bleed approach for having background on contained elements:
https://www.youtube.com/watch?v=81pnuZFarRw
It worked all well until I got one of the children with position: fixed applied to it (pop up menu). I can't restructure HTML by taking out such child outside of parent element. I guess it's because clip-path property is creating a new stacking context. So the child is positioned fixed relative to it's containment parent instead of viewport.
I had to resort back to using pseudo element on parent instead to apply such full-bleed background effect.
Did anyone overcome such edge case in any better way by a chance?
https://www.youtube.com/watch?v=81pnuZFarRw
It worked all well until I got one of the children with position: fixed applied to it (pop up menu). I can't restructure HTML by taking out such child outside of parent element. I guess it's because clip-path property is creating a new stacking context. So the child is positioned fixed relative to it's containment parent instead of viewport.
I had to resort back to using pseudo element on parent instead to apply such full-bleed background effect.
Did anyone overcome such edge case in any better way by a chance?
YouTubeKevin Powell
Give CSS Challenges a follow: https://twitter.com/ChallengesCss
#css #shorts
--
Come hang out with other dev's in my Discord Community
https://discord.gg/nTYCvrK
Keep up to date with everything I'm up to
https://www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
https://www.twitch.tv/kevinpowell...
#css #shorts
--
Come hang out with other dev's in my Discord Community
https://discord.gg/nTYCvrKKeep up to date with everything I'm up to
https://www.kevinpowell.co/newsletterCome hang out with me live every Monday on Twitch!
https://www.twitch.tv/kevinpowell...
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?
