clip-path Why does it work? š¤
Hi everybody. I'm very happy to reah the community.
I have a question about the clip-path property.
I have succeeded in managing what I want but I don't understand why it works!
Find below the codepen link:
https://codepen.io/vianneypercq/pen/MWLbROM
ā”ļø My question is: why as the gray background rises, it hides the gray text (inside .bx-1) and not the white text (inside .bx-2)?
Does the clip-path property have an impact on element stacking?
Why does it work? š¤
There's probably a subtlety I don't understand.
I couldn't find any useful information on MDN, stack overflow or elsewhere.
Thank you very much.
4 Replies
that is because of the position: fixed; it makes a new stacking context, on top of the other elements.
so the elements scroll underneath.
but it is still being affected by the clippath of it's parent
you can give your 2 p-elements a different background-color, so you can see what happens
btw, for the full size clippath, instead of the
clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%)
you can do clip-path: inset(0) (that is the same as the top/right/bottom/left position. all 0)Thank you @MarkBoots
I have given a different background color to the two p elements.
I understand that with the fixed position, the two p element are on top of the other elements.
I'm very sorry but I still do not understand why as the gray background rises, it hides the gray text (inside .bx-1) and not the white text (inside .bx-2).
(Thanks for the tip inset(0) )
both boxes have a clip-path that hides everything that is outside of it. when the grey box scrolls up, it will start to show the part of the p that is inside of it
in the same time, the white box is scrolling up as well and is starting to hide its p.
I think I get it. Because of the clip-path, I have to think about what's inside and what's outside each box. All children outside will be hidden by the clip-path and all children inside will be visible. As both p's are identically fixed, they exit the flow and overlap. Scrolling the two boxes obviously doesn't move the two fixed p's, but rather the visible and hidden areas of each box.