CSS positioning can be a bit confusing for beginners but once they get the hang of it, they will realize that it offers them so much flexibility with the placement of their elements. In this article, I will try to explain the CSS position property and its values as clearly as I can to help you get a better grasp of them and how they affect your elements.
Table of Contents
- Introduction
- Static Positioning
- Relative Positioning
- Absolute Positioning
- Fixed Positioning
- Sticky Positioning
- Conclusion
Introduction
The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.
There are three (3) rules that determine how things get rendered on the screen or just based on your HTML code by default:
- Block elements take up 100% of the page width while their height is determined by the content, so your content is the first thing that determines how large your elements get displayed.
- The default layout or order of elements on the screen is determined by your HTML code.
- Children sit on parents. For example, if you have an h1 in a div, you can say the h1 is on top of the div.
You can use the CSS position property to position elements on the screen the way you want them to instead of going along with the default layout and in most cases, you are going to want to make changes. CSS position is usually used with the co-ordinate properties (top, left, right, bottom). The position property can take five (5) values and we will go through each of them in this article.
Note - The co-ordinate properties only work on elements that have any of the position properties except the static position declared on them.
Static Positioning
All HTML elements are static by default and static means go along with the rules and keep to the default HTML flow. From the pen below, you can see that adding the position property with a value of static to the divs doesn't change the default positions of the elements.
Relative Positioning
Relative positioning allows you to position the selected element relative to how it would have been positioned by default or if it was given a position of static. Say you give an element a position of relative and then left of 50px, you are saying the element should move or be pushed 50px away from where it would have been positioned, it is like adding a margin of 50px between the left of the element and where it was initially positioned or say you give the element property of right 100px, it is the margin between the previous right edge of where the edge of the element used to be and its current right edge of 200px relative to where it should be. When you move an element that has a relative position, it doesn't affect the position of anything else on the screen, it is as if the old position was kept or still being maintained and everything else just flows around it as if it was never moved. All the other elements keep their positions, they will not be adjusted to fit into any gap left by the element. as is illustrated in the pen below. When you give an element a position of relative, it does nothing until you add at least one of the left, right, top or bottom properties to the element. Setting the top, right, bottom, and left properties of a relatively positioned element will cause it to be adjusted away from its normal position.
Absolute Positioning
Say we have an image in a div and the div has a position of relative, if we give the image an absolute position and a right property of 50px, it's not going to shift left by 50px, it's going to shift to the right of the screen and this is because, with absolute positioning, we are positioning the element relative to its parent. The right property of 50px will give the element a right margin of 50px from the right of its parent which is a div in this case. An element with position absolute is positioned relative to the nearest positioned ancestor, however, if an absolute positioned element has no positioned ancestors, it is positioned relative to the body. A positioned element is one whose position is anything except static. You can use absolute positioning to place an element exactly where you want in its parent. Unlike relative, using absolute positioning affects the flow of your HTML, it is like the element is removed from the HTML flow.
Fixed Positioning
If you give an element a fixed position and a left, right, top or bottom property, if you scroll, the element will not move but stay fixed to the position relative to the body of the website or page. Fixed positioning is useful if you have a navigation bar or sidebar that you want to stay fixed. An element with position fixed is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. A fixed element does not leave a gap in the page where it would normally have been located.
Sticky Positioning
An element with a position sticky is positioned based on the user's scroll position.
A sticky element toggles between relative and fixed, depending on the scroll position of the browser window. Note that you have to give the element at least one of the left, right, top or bottom properties for it to behave as expected else the element will take on the behavior of a relatively positioned element.
The sticky property is a combination of relative and fixed which keeps an element relative until a position condition is met. Say you give a div a position of sticky and a top property of 50px, the element will be positioned relatively until you scroll to a point in the viewport where the element is 50px from the top, then it becomes fixed.
Conclusion
I hope this article has helped you understand positioning in CSS better. Keep winning!