> All in One 586: On fixed elements and backgrounds

Ads

Wednesday, June 3, 2020

On fixed elements and backgrounds

After just playing with apsect-ratio and being pleasantly surprised at how intuitive it is, here’s an example of CSS acting unintuitively:

If you have a fixed element on your page, which means it doesn’t move when you scroll, you might realise that it no longer acts fixed if you apply a CSS filter on its nearest ancestor. Go ahead, try it on the CodePen.

This is because applying a filter on the fixed element’s immediate parent makes it becoming the containing block instead of the viewport.

Hui Jing has more to teach in there about scrolling, rendering performance, and trickery with using pseudo elements to avoid issues.

I find this kind of thing among the most challenging CSS concepts to wrap my mind around, like Block Formatting Contexts (BFCs). A BFC Is A Mini Layout In Your Layout. 🤯

Direct Link to ArticlePermalink

The post On fixed elements and backgrounds appeared first on CSS-Tricks.



from CSS-Tricks https://ift.tt/2ASopDI
via IFTTT

No comments:

Post a Comment

Clear/Wind today!

With a high of F and a low of 66F. Currently, it's 82F and Clear outside. Current wind speeds: 19 from the South Pollen: 0 Sunri...