Get better at CSS Positioning
An in-depth guide to become good at CSS Positioning or the CSS Position property.
CSS Position Property is used to position an element in a html document. Position value can be any one of the following
- static (by default)
- relative
- absolute
- fixed
- sticky
Static
|
1 2 3 |
element { position: static; } |
Every element is positioned as static by default. This means that element will adhere to the normal flow of the page. Or in other words, element will lie in its natural position where it is supposed to be.
See the Pen CSS Static Positioning by Tech Jasmine (@techjasmine) on CodePen.
You generally don’t position an element as static unless you want it to go back to its normal position from an altered position (relative or absolute). This is useful when there is a change in the layout or in case of responsive design.
Relative
|
1 2 3 |
element { position: relative; } |
If you set an element’s position as relative, you can move it around with other properties namely top, bottom, left and right. These properties refer to the distance an element should displace from its parent. The properties top, bottom, left and right can be in terms of any css units such as px, %, ems, rems etc.
For example, left: 30px moves an element 30px from its left edge away from the parent.
See the Pen CSS Relative Positioning by Tech Jasmine (@techjasmine) on CodePen.
Important point to note here is that child element moves relative to its parent.
Absolute
|
1 2 3 |
element { position: absolute; } |
This is an important CSS Position property which is often misunderstood. Absolute property positions the element relative to the Document (and not its parent). Yes, you can re-read the sentence again.
Document in general context means the device screen. So left: 5% and top: 10% for an absolutely positioned element moves it 5% from the left edge of the screen and 10% below from the top edge of the screen.
See the Pen CSS Absolute Positioning by Tech Jasmine (@techjasmine) on CodePen.
The parent element has no longer any control over the position of the child element. Technically speaking, element will be removed from the normal flow in the document.
There is more to absolute and relative positioning.
You can also absolute position an element relative to its parent. This means the movement of the element is relative to its parent once again and not the document.
|
1 2 3 4 5 6 |
parent { position: relative; } child { position: absolute; } |
This is used more often when building layouts especially in case of UI elements such as Cards with Buttons, Modals with Close Button.
See the Pen Relative + Absolute Position by Tech Jasmine (@techjasmine) on CodePen.
You may have a question in your mind, why we cannot use position : relative on the child element itself. Relative positioning is generally good for small movements or nudging the element. But if you completely want to reposition an element from its natural position position : absolute will be a better choice.
Fixed
|
1 2 3 |
element { position: fixed; } |
The position : fixed property is very similar to position : absolute in terms of placement of the element relative to the document or screen. But the element isn’t affected by scroll movement. This means element remains put in the same place, even if you scroll to the bottom of the page.
See the Pen CSS Fixed Positioning by Tech Jasmine (@techjasmine) on CodePen.
The typical use case of fixed positioning is for navbar or a sidebar which needs to be fixed to the top or side of the screen for swift navigation.
Sticky
|
1 2 3 |
element { position: sticky; } |
The position : sticky is a new kid on the block. It may not have support across all browsers, but it sure is increasing every day. Recent versions of major browsers support it.
See the Pen CSS Sticky Positioning by Tech Jasmine (@techjasmine) on CodePen.
Its an interesting property which can be considered as a good mix of position : relative and position : fixed. The child element remains fixed or stays put when scrolling the parent element, but never exceeds its boundary.
Typical use case may be social share buttons for a blog post or a table header in a long data list.
Here are some cool things which you can do with your new knowledge of CSS Positioning.
- A Fixed Navbar
- Sticky Call to Action
- Modal or Card with Close Button
See the Pen Cool things with CSS Positioning by Tech Jasmine (@techjasmine) on CodePen.
World is your Oyster. Have fun !
More Resources
I hope I have made CSS Positioning a bit easy for you.
Keep Smiling, Keep Coding !
PS: If I have helped you and made a difference in your life, considering supporting my blog.
