Originally Published here.
Image Credit: Author
Last night, I spent my time turning my blog’s theme to dark mode. After lots of CSS tweaks, Google searches, Reddit questions, and learning few tags, it finally came to life.
You can check out the blog here:
Well, this led me to learn, more like, revise CSS positioning, and I thought, well, why not make it easy for others too. Here we go!
Positioning
Ask yourself, what you think of ‘positioning’ something. You’re basically telling it where to reside, right? Now, a webpage is made up of combination of boxes.
Image Credit: Facebook
Positioning in CSS means, to set the position of an element in the webpage.
P.S: This is the code I used to show these blocks
* {
outline: 2px solid #1a1a1a;
}
Ever noticed how the top nav bar stays at top even when you scroll the screen. Yep, that’s because it is positioned to act that way.
Let’s see the first one, shall we?
position: static;
This is the default position for all HTML elements. It is positioned with the normal flow of the webpage just like these texts. You can’t use top, bottom, left, right properties with this.
div. static {
position: static;
border: 3px solid #73AD21;
}
W3Schools
That was easy, right? It makes element static with respect to the webpage.
position: relative;
Now, what if you want to specify directions to a particular element while being static, well, this is where relative position comes into play.
div. static {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
W3Schools
Note: Other content will not be adjusted to fit into any gap left by the element.
In a nutshell, relative without any direction property acts like static.
position: fixed;
The name gives it away, doesn’t it? The element stays fixed at the specified place on the viewport, no matter what!
The browser’s viewport is the area of the window in which web content can be seen. This is often not the same size as the rendered page, in which case the browser provides scrollbars for the user to scroll around and access all the content.
- MDN
Viewport is basically that area of the content you see on the screen, it varies across devices.
This is my viewport
position: fixed; makes an element acts like an overlay. It is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled.
‘fixed-position’ elements are also removed from document normal flow which makes them act like overlay.
Example:
position: absolute;
Remember, how in position: relative; the element resides at the specified space but holds the normal area to itself. Well, in absolute-position, just like fixed, element is removed from document normal flow which means, for other elements, it doesn’t exist in that webpage. Again, power of overlapping.
An element with absolute position is positioned relative to its closest positioned ancestor. It looks up for relative parent, if any. If not relative, then it becomes relative to .
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
position: sticky;
Literally every nav/top nav has this as position. This is a hybrid of fixed and relative/static. Let’s break it down and see what it brings to table.
So, the quirks this position element gets from static/relative is that it follows the normal flow of the webpage till it hits the specified mark, and the moment it hits that specified mark it acts like an overlay, fixed on that place.
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
Now, sticky does makes you feel like playing with it and there’s nothing wrong with that. Go ahead and do it. But you probably should read this amazing story by Elad Shechter. He has break down the sticky position in a very easy, and understandable way.
Well, that’s been it for this story, hope this story was worth your time and you enjoyed it. Consider following me here if you did.
Did you know, by holding on the clap icon, you can give more than one claps, easy, right!
Peace.
If you’d like to support me you can do that here. Many thanks!!