CSS layout is not just one individual CSS property or even module. Everything on the web is a box. And the layout of these boxes are determined the...
For further actions, you may consider blocking this person and/or reporting abuse
Great article! An important clarification would be that the containing block for a fixed positioned element is not always the viewport: if they have a parent with a
transformapplied, it will behave pretty much as if it was absolute positioned to it.Hi,
Can you clarify this because it's the first time I'm hearing about it.
Are you saying parent with "transform" property will act as a base for a fixed positioned item inside it?
Exactly. Same thing happens with
filterandperspective, but browsers are inconsistent on those.Here's a quick demo with
transformjsfiddle.net/to4g607c
This is great and thank you for the effort in putting this together.
I wrote a post about CSS positioning few months back here on DEV and i want to ask one question:
Can i update the post with a link to this post as an additional learning resource?
This is great!
Hi, great post thank you !
Add the #beginners you will reach and help more people 👌🏻😉
That's an excellent suggestion, thank you! Updated the tag.
Why is it
staticfor default block position? For me static is like well.. static. Something that doesn't move.I'd prefer to name default positioning like
normalordynamicor something like that to highlight that it's able to move if neighbours are around.Am I missing something?
I think I understand what you're saying and naming things is always hard, but I think you probably said it best yourself;
Staticmeans something that doesn't move. The blocks in their default state don't actually move from the position that they are rendered in. Plus they can't be manipulated by directional properties (left, right, top, bottom, z-index) so the blocks do therefore remain static on the page.Whereas a term like
dynamicfeels better suited to describing the way that Flexbox works to display blocks.Hope this helps!
This is really fabulous
Exactly the post I needed. Thank you immensely Chen :)
This is really great, thank you for sharing.
Great article, thanks Chen Hui Jing.
Great article, thank you for this!
Detailed explanation. Awesome.
Ok, this is the type of articles you read to actually become "full stack ninajs superwomans supermans by end of 2020", and not the shitty ones with 1 video tutorial on the subject ;)