If you want to understand CSS layout, we need to have a mental model of CSS layout works.
If you learn every CSS property and its wide range of values, you only get frustrated with CSS and don't consider diving deeper. Ultimately you hate the job you do.
So CSS is a bunch of properties working together weirdly because the same code works differently in different scenarios.
Same input but different output !
We must understand how the layout works to tackle its weirdness because CSS is about placing and styling items in different viewports/sizes. Yeah! I am speaking Layout.
Hitting the nail!
If you have been writing CSS for some time, you have probably heard these layout terms.
Flex,
Positions,
Table,
Grid,
Flow.
In the old days, when the web was seen as a set of hyperlinked text documents - we used Flow layout.
What is Flow?
It is the normal flow of the document.
What document? Set of hyper-linked documents written using HTML.
If it is a document, it will have text and paragraphs.
In English, the text moves from left to the right, and paragraphs are isolated from top to bottom.
We have two paragraphs separated by space in vertical order(top to bottom) and texts/words placed in horizontal order(left to right).
The vertical order is called block; the corresponding HTML elements are block elements(e.g., div).
The horizontal order is called inline; the corresponding HTML elements are inline elements(e.g., span,p).
Flow is the default layout used in HTML elements.
Flow is default for non-table html elements.
Notice I used horizontal and vertical in the flow layout(i.e., X and Y axis).
What about the Z-axis - overlapping of elements one over the other?
And we do have a property called Z-index!
Will it work by default (i.e., Flow layout --> Block and inline)?
Just think!
No, it won't work because the flow is the default layout, and its design is based on the document - texts and paragraphs.
We don't want texts to overlap/intersect with each other after all; a document's purpose is communication.
So the default layout(Flow) won't support the Z-axis.
We need to change the layout explicitly to work with Z-axis.
But wait, there are properties like color - that work across all layouts in the same manner.
Also, some properties work differently on different layouts.
For example - width property.
So there are properties that work differently on different layouts.
In a nutshell, properties that
Don't work on the particular layout - e.g., z-index on flow layout.
Works the same irrespective of layout - e.g., color.
Works differently on different layouts - e.g., width.
CSS is all about understanding how properties and layout systems work together.
Properties behaves based on the context they were in - the context is provided by layouts we chose.
Also, we can have positioned layout inside flex.
Flex layout is based on the parent element.
We can use nested layouts like nested flex, position, etc.
We will see all of those in the upcoming sets of articles.