So one day, sitting in a dark attic, there was a developer, named "Hakon Wium Lie", if you could pronounce it tell me how because I found it harder than centring a div.
CSS was created with the dedication and passion of creating something for developers that is more difficult to pronounce than Elon Musk's son's name.
There are a lot of weird things about CSS. But one thing we all agree on is that positioning is the weirdest.
I've been CSS's boyfriend for a few months now, and I know how to avoid her tantrums. And this is my diary, where I try to tell you on about how to avoid them as well.
One thing I tell every developer who says "I wanna love CSS" _ apart from "I'm gonna end your life, CSS is my girl!" _ is "you gotta learn how to divide and conquer"
So let's divide and conquer this CSS mystery!
I like to divide it into two parts:
Native CSS Layouts
The
position
property!
Native CSS Layouts
So there are several native CSS layouts,
I mean who needs these many layouts and half of them are trash:-
Block just means that the element has 100% width
Inline means that it only has the width of the element (Note: Margins don't work here)
None
means to hide the damn thingContents mean to show the damn thing
Inline-block is breeding b/w block and inline, you have margin, but no 100% width
I still ain't know what
flow
is after working with CSS for years, so it is useless, just forget it.
Now let's come to flex, aka 💪 and grid.
Flex
Flex just means that the element is the stack of coins you will be getting after writing this CSS, with each child element representing one penny.
You can stack it horizontally or vertically, and you can also specify how much space there should be between the elements.
Here is one image I stole from css tricks :
The container is the flexbox, and the yellow thing is the items. That is flexbox. I say that flexbox isn't the most confusing part, so I'll leave the GOATs at css-tricks to explain it: A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks
Grid
Grid is like a flexbox, but this time it's a suitcase of cash and not just a stack.
==>> Grid is flex but 2 dimensional
Yeah, I managed to steal another image, those people must be like: wtf 😂
Anyways, Grid is also not such a big problem with position, so here's a link: A Complete Guide to CSS Grid | CSS-Tricks - CSS-Tricks
position
This one is actually sensible, it has 5 possible values:
Static
This is the default, so you'll like never be setting this explicitly
Relative
This will allow you to use top
bottom
left
and right
but respective to where the position of the element would have been if the position was the default. So if I set top: 5px
; it is 5px off from the top position where it would have been.
Absolute
It will just render your element on the axis. The axis will be the document by default, but if the element's parent has relative positioning, the axis is relative to the space inside the element.
So if an element has top: 4px, then the element will be 4px away from the top on the screen.
Fixed
Fixed means it will stay there if you scroll. If an object has absolute positioning, it will go away once you scroll, but fixed will keep it at that position.
So fixed is absolute but fixed
Sticky
So what you might have noticed is that with absolute and fixed positioning the element with overflows the element that is statically rendered. To save it from happening, sticky elements switch between static and fixed when scrolled.
This will not come in handy unless you are making a navbar, so I'll not detail it much.
Top comments (0)