DEV Community

Cover image for Understanding positioning in CSS

Understanding positioning in CSS

Chen Hui Jing on December 18, 2019

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...
Collapse
 
facundocorradini profile image
Facundo Corradini

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 transform applied, it will behave pretty much as if it was absolute positioned to it.

Collapse
 
klaudiomilankovic profile image
Klaudio Milankovic

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?

Collapse
 
facundocorradini profile image
Facundo Corradini • Edited

Exactly. Same thing happens with filter and perspective, but browsers are inconsistent on those.

Here's a quick demo with transform

jsfiddle.net/to4g607c

Collapse
 
ziizium profile image
Habdul Hazeez

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?

Collapse
 
victorquanlam profile image
Victor Quan Lam

This is great!

Collapse
 
yoadev profile image
Younes

Hi, great post thank you !

Add the #beginners you will reach and help more people 👌🏻😉

Collapse
 
huijing profile image
Chen Hui Jing

That's an excellent suggestion, thank you! Updated the tag.

Collapse
 
karataev profile image
Eugene Karataev

Why is it static for default block position? For me static is like well.. static. Something that doesn't move.
I'd prefer to name default positioning like normal or dynamic or something like that to highlight that it's able to move if neighbours are around.
Am I missing something?

Collapse
 
demaine profile image
Colin Demaine • Edited

I think I understand what you're saying and naming things is always hard, but I think you probably said it best yourself; Static means 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 dynamic feels better suited to describing the way that Flexbox works to display blocks.
Hope this helps!

Collapse
 
ben profile image
Ben Halpern

This is really fabulous

Collapse
 
fly profile image
joon

Exactly the post I needed. Thank you immensely Chen :)

Collapse
 
lisasy profile image
Lisa Sy (she/her)

This is really great, thank you for sharing.

Collapse
 
nguyenquangtin profile image
Tony Tin Nguyen

Great article, thanks Chen Hui Jing.

Collapse
 
calvinmills profile image
Calvin Mills

Great article, thank you for this!

Collapse
 
zainwah24 profile image
zainwah24

Detailed explanation. Awesome.

Collapse
 
synchromatik profile image
synchromatik

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 ;)