6 ms·
>7. Drop support for CSS `position:`, there's better alternatives now & it does more visual harm than good Tell me an alternative to flexbox scrolling with "po
by byko3y 6y ago
>7. Drop support for CSS `position:`, there's better alternatives now & it does more visual harm than good
Tell me an alternative to flexbox scrolling with "position: absolute; left: 0; top: 0; bottom: 0; right: 0".
I do agree "position: sticky" and "position: fixed" are harmful though.
- alcinnz 6y agoI'm not clear what you're describing with "flexbox scrolling"? My reasoning is that I want to prevent elements from overlapping and obscuring important information. CSS is generally designed to avoid that, which is what the "CSS is awesome" memes like to illustrate.
- byko3y 6y ago>I'm not clear what you're describing with "flexbox scrolling"? "position: absolute" can be used to disrupt the two-way size propogation. Without it you either get shrinked content on y, flexbox wrapping problem on x, scroll appearing on a wrong element in some cases (or cropping for "overflow: hidden"), or you have to set width and height of the block with scroll using css "calc()" — all these solutions are ugly. >My reasoning is that I want to prevent elements from overlapping and obscuring important information The most simple example of overlapping elements is a background/border. You can look around this page and find a lot of overlapping graphical elements — it's not the problem, but overlapping text (and other content) is. "CSS is awesome" example formally has no overlapping DOM elements, no "position" attributes. It's just a block with "border" style and "width" set to some fixed amount. Often this problem happens without border on the block and remains invisible, unless two such blocks are really close together and the text begins to overlap. Still no "position" involved though.