Fortunately, you can improve your site’s functionality and speed up your workflow using correct CSS positioning. Let’s explore different CSS positioning properties and review the different layouts you can use to create a modern webpage.
What Is the CSS position property?
The CSS position property defines the position of an element. You can manipulate the location of an element with left, right, top, bottom, and z-index properties. Though you can use CSS Flexbox or CSS Grid to make symmetrical websites, position properties help you build asymmetrical websites by detaching each element from other elements.
In other words, the CSS position property allows elements to move freely in a document.
The syntax for the CSS position property is:
Here are the five values that position property can take:
static relative absolute fixed sticky
NOTE: You can position elements using the left, right, top, and bottom properties. But these properties behave differently, depending on the value of position.
CSS Static Positioning
Static is the default position for HTML elements. Let’s look at some example HTML to understand it:
We have placed three children in a parent container. We’ll use this example to play around with the different position properties. Here’s the base CSS that each of our examples will use:
Now, let’s add position: static to the second child with bottom and right properties.
Here’s the result:
As you can see, the border property applies but there’s no difference in the second child positioning. If you do not apply a CSS position property, it will take static as the default value. This positions an element according to the standard page flow. Any element with a static position will ignore the left, right, top, bottom, and z-index properties.
CSS Relative Positioning
When you apply relative positioning, an element will initially behave the same as for static positioning. But now, the left, right, top, bottom, and z-index properties will work by nudging the selected element from its original position in the specified direction.
Let’s change the position value of the second child from static to relative with the same top and bottom properties as before.
Here’s the result:
As you can see, the second child is shifted 40px from the bottom (towards the top) and 50 px from the right (towards the left).
CSS Absolute Positioning
Any element with absolute positioning is removed from the normal flow of the document. Other elements will behave as if that element does not exist in the document. The final position of the element is decided by the top, bottom, left, and right properties.
Note that an element with absolute positioning is positioned relative to its nearest positioned (non-static) ancestor. If there is no positioned ancestor, it is positioned relative to the initial containing block.
Let’s understand this using two examples. First, an absolute-positioned child with no positioned ancestor:
Here’s the result:
In this second example, the parent container has a non-static position:
The child is now positioned with respect to its container:
CSS Fixed Positioning
An element with a fixed position is also removed from the normal flow of the document. There is no space created for that element in the entire page layout. It is positioned relative to the initial containing block set by the viewport (except when any of its ancestors has a filter, transform, or perspective property set to any other value than none). The top, left, right, and bottom properties will decide the final position of the element.
Let’s tweak our existing example by adding more children. Previously, we fixed the parent container’s height. Let’s remove it and set flex-direction: column so that our flex container is large enough to scroll down and visualize the result. Now, add fixed position property to the second child as shown below:
Here’s the result:
So scrolling does not affect the second child’s position at all. Its position is fixed relative to the initial containing block set by the viewport. Occasionally, scrolling elements can cause performance and accessibility issues. You can make an accessible website using semantic HTML and CSS.
CSS Sticky Positioning
An element with sticky positioning possesses mixed properties of relative and fixed positioning. A sticky positioned element will follow relative positioning properties until it crosses the specified threshold. After that, it will behave as if it were fixed, until it reaches the boundary of its parent.
You can specify the threshold using left, right, top, and bottom properties. Without a threshold, the element will behave as if it had relative positioning.
Let’s set the second child position to sticky with a top threshold:
Here’s the result:
As you can see, the second child behaves like the other children while scrolling. But when it reaches the threshold value (top: 0px), it behaves as if it were fixed and leaves the normal document flow. You can make a navigation bar stick to the header with sticky positioning.
Conclusion
The CSS position property is an advanced web design skill. It takes some learning, but all you need to do is play around with different values, outcomes, and exceptions. Remember that nothing can beat practice when it comes to creating an awesome web design. So keep practicing and you’ll get better. Happy coding!
