What is CSS Quickes?
I started to ask my beloved community on Instagram: "what CSS properties are confusing for you?"
In "CSS Quickies" I will explain one CSS property in deep. These are community requested properties. If you also confused about a CSS property, then write to me on Instagram or Twitter or down below in the comments! I answer all questions.
I'm also live streaming while coding on twitch.tv. If you want to talk to me directly!
Let's talk about position
Ahh, Positioning element in CSS. This is usually not the fun part of CSS but we all have to do it. That's why today we will talk a little bit about the position property.
The default: static
If you set it or not your element is Static by default. So it follows the normal flow of the page. That means that the HTML elements are shown in the same order that they appear in the HTML file. Block elements will be rendered in there own new line and inline elements if they fit in the same line.
top, bottom, left and right properties have no effect when an element is set to static.
.box {
position: static;
}
static
+--------+ +--------+ +--------+
| | | | | |
| | | | | |
| | | | | |
+--------+ +--------+ +--------+
Relative
The relative property moves the element relative to their static position. Imagine there is a big red dot in the top left corner of your element. Now when you set the top and left property the browser counts the pixels (or %) you have set and then moves the element according to these values. The same will happen if you set bottom and right but now the big red dot is on the bottom right. top wins over bottom and left wins over right if you happen to set both in the same element but you should stick to just using one of each. Either top or bottom and left or right. With relative, the original space that this element has taken in your page flow will still be occupied by this element.
.box{
position: relative:
top: 100px;
left: 50px
}
relative
+--------+ +--+ +--------+
| | | | |
| | | | |
| | | | |
+--------+ | +--------+
↓
+-------+
| |
| |
+-------+
Absolute
Position absolute works kind of the same as relative but also different. Again Imagine the red dot but this time it is not positioned where the element you are applying it to is, but the parent element. We have the same logic as with relative. The only thing that has changed is the point where the browser will calculate where the element should be positioned. Also now the space that this element has taken is free for other elements to take. In other words, the element is out of the normal flow and does not take up space.
.box {
position: absolute
top: 5px;
left: 5px;
}
absolute
parent↓
+-------------------------------------------------+
| |
| +--------+ |
| | | |
| | | |
| | +<--------------+ |
| +--------+ +---------+ | +---------+ |
| | | | | | |
| | | + | | |
| | | | | |
| +---------+ +---------+ |
| |
| |
| |
| |
+-------------------------------------------------+
Fixed
Fixed is kind of like you would take a hammer and nail the element to that part of the browser window and it will stay there even if you try to scroll. It is always on your screen. Okay, let's explain it a little bit more precise. Remember that red dot from before? Now this red dot is bound to the corners of your browser. top: 0; and left: 0; would be the first pixel of your website on the top left. You can imagine what bottom: 0; and right: 0; do right? Another function of fixed is that if you scroll the element will still stay exactly where you specified it and if you don't have any z-index it will be on top of the other elements.
.box {
position: fixed;
right: 10px;
top: 10px;
}
fixed
+---------------------------------------------------------------------------+
|webpage _ x |
+---------------------------------------------------------------------------+
| +----------+ |
| parent↓ +---------------------------->+ | |
| +-------------------------------------------------+ | | |
| | | | | | |
| | | | | | |
| | | | +----------+ |
| | | | |
| | +---------+ | +---------+ | |
| | | | | | | | |
| | | | + | | | |
| | | | | | | |
| | +---------+ +---------+ | |
| | | |
| | | |
| | | |
| | | |
| +-------------------------------------------------+ |
| |
| |
| |
| |
+---------------------------------------------------------------------------+
Sticky
sticky is a relatively new position method, and browser support is all over the place. I would not recommend it, if you know that you have a user that either user old browsers or some under 1% type of browser, also mobile browser struggle with this positioning method. However, how does sticky work? First of all, your sticky element if you don't scroll is positioned as if it would be a static element. The magic happens when your scroll! The sticky element will stick to the position you specified with the top property! This is why you need to set the top property to make sticky work. You miss the red dot, right? Imagine the red dot is the top of the viewport of your browser window where you see your page. So if you set top to zero, your stick element will stick to the top of your browser with no gap at all. This is useful for a sticky menu. If your design calls for a gap, add the number of pixels to the top property and your good to go! Also, keep in mind that if there is no z-index, your sticky element will be above all other static elements. Also, no I did not create an ASCII art for this because this needs scrolling to be explained that's why I implemented this beautiful codepen for you! Just scroll to see the effect!
.box {
position: sticky;
top: 0;
}
Conclusion
We learned today how to position things around in your browser, but position should be only used if you have to and if you know what you are doing! Some of these calculations can be expensive for the browser, and if you have too many elements that need extra calculation, your website can become lagy and sluggish. So think first then implement! It is fun to play around with these and what crazy effect you can do with them! However, as always, you need to understand the basics! So feel free and play around with the codepen example.
It would help me if you could do the following for me!
Go to Twitch and leave a follow for me! If just a few people would do that, then this would mean the world to me! ❤❤❤😊
👋Say Hallo! Instagram | Twitter | LinkedIn | Medium | Twitch | YouTube
Top comments (10)
position: stickyhas like 90% browser support, and it fails quite gracefully, and it's better than using scroll-based JS positioning, so all in all using it might be a great example of progressive enhancement. That said, it does have some quirks, eg when having a parent with explicitly setoverflowproperty.As for
position: relative, what might be the most popular use case for it is creating a new containing block for absolutely positioned elements. Basically, if you want an element withposition: absoluteto have 0,0 coordinates somewhere other than top left corner of the page - putposition: relativeon its parent to use parent's top left corner as a start.Yeah, the problem here is the mobile browsers! The quirks here can be a big problem to make it work as you want it to work.
I just found this article series, and must say thank you! Simple, but very enlightening, even for "pros".
With
position: stickyyou don't have to specify atopattribute. You can also instead specify aleftorrightattribute, which works for horizontal scrolling. Useful for tables where you want the top headers to stick and the left or right columns to stick on wide tables!Thank you for this article!
Wouldn’t it be more accurate if it was the next parent with position: relative ?
Great! Thank you :)
Glade that you liked it! :)
position can be tricky - so it's always good to refresh. "Sticky" looks helpful (once enough browsers support it) - Oh - and nice ASCII art! :)
Thank you! Yeah, I always wanted to use ASCII art in a blog post! I think it fits very well
Why have you used 'margin: 20px' in the '.sticky' class even when its not doing anything, in the last example ?
Copy and paste probably.
No real reason for that margin there.