Positioning elements with CSS can be tricky in web development. Things can quickly get complicated as we add more elements to the webpage. Therefore, it is essential to know how to use CSS for aligning elements. It will also save us time while coding.
There are many different ways/methods for positioning elements. You can use pure CSS properties like
display, or new layout modules like CSS Flexbox, Grid, or a framework like Bootstrap.
I will be covering each of them one by one in the future, but for this piece, we are going to focus on CSS position property.
CSS Position & Helper Properties
There are five main values of CSS Positions:
position: static | relative | absolute | fixed | sticky
and properties for setting the coordinates of an element (I call them “helper properties”):
top | right | bottom | left AND
Note: Helper properties don’t work without a declared position, or with position: static.
What is this z-index?
We have height and width (x, y) as two dimensions, z is the third. As an element’s
z-index value increases, it moves in front of other elements. Z-index also doesn’t work with
position: static or without a declared position.
Now let’s explain the CSS position values in detail.
position: static is the default value. Whether we declare it or not, elements are positioned in normal order on the webpage. Let’s give an example:
First, we define our HTML structure:
Then, we create two boxes and define their positions:
Div’s are block elements by default, and that’s why they are not on the same line.
position: relative, an element’s new position is relative to its normal position.
position: relative and for all non-static position values, we are able to change an element’s default position. But only defining
position: relative is not enough, we also need to set the element’s coordinates with helper properties.
Let’s move the orange box from before next to the blue one:
NOTE: Using position: relative for an element, doesn’t affect other elements’ positions.
position: relative, where the element is positioned relative to itself, an absolute positioned element is relative to its parent.
An element with
position: absolute is removed from the normal document flow. It is positioned automatically to the starting point (top-left corner) of its parent element. If it doesn’t have any parent elements, then the initial document <html> will be its parent.
position: absolute removes the element from the document flow, other elements are affected and behave as the element is removed completely from the webpage.
Let’s add a container as parent element:
And change its position value to absolute:
It looks like the blue box has disappeared, but it hasn’t. The blue box behaves like the orange box is removed, so it shifts up to the orange box’s place.
Let’s move the orange box by five pixels:
The coordinates of an absolute positioned element are relative to its parent if the parent also has a non-static position. Otherwise, helper properties position the element relative to the initial <html>.
position: absolute, fixed positioned elements are also removed from the normal document flow. The differences are:
- They are only relative to the <html> document, not any other parents.
- They are not affected by scrolling.
Here in the example, I change the orange box’s position to fixed, and this time it is relative five pixels to the right of the <html>, not its parent (container).
As we can see, scrolling the page doesn’t affect the fixed positioned box. It is not relative to its parent (container) anymore.
position: sticky can be explained as a mix of
position: relative and
It behaves until it reaches a declared point, like
position: relative, and afterwards changes its behavior to
position: fixed. The best way to explain
position: sticky is through an example:
IMPORTANT: Position Sticky is not supported by Internet Explorer or earlier versions of Edge.
That’s about it for the CSS Position Property. It may seem complicated at the beginning, so the best way to understand it is by practicing. Keep coding and experimenting until you have a better understanding. If something is not clear, leave a question in the comments and I’ll do my best to answer it.
If you want to learn more about Web Development, visit our Blog Website: www.codingdocs.com