by Cem Eygi

How to use the position property in CSS to align elements

Photo by Sai Kiran Anagani on Unsplash

Positioning elements in web development isn’t as easy as it seems. Things can get complicated as more elements come to the page. Therefore, it is essential to know how to use CSS for aligning elements. It will also save our time while coding.

There are different ways/methods for positioning elements. Using Bootstrap is a good way, for example, but not all projects use Bootstrap. In this article, I will be explaining one of the ways of aligning elements with pure CSS: the position property.

We can also use CSS Display property to align elements with values like flex, grid, inline-block etc. Check my other article about the Display property here.

CSS Position & Helper Properties

There are 5 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 z-index

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 2 dimensions. Z is the 3rd dimension. An element comes in front of other elements as its z-index value increases. Z-index also doesn’t work with position: static or without a declared position.

Elements are ordered from back to front, as their z-index increase

Now let’s explain the CSS: position values in detail.

1. Static

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:

<body>
  <div class="box-orange"></div>
  <div class="box-blue"></div>
</body>

Then, we create 2 boxes and define their positions:

.box-orange {          // without any position declaration
  background: orange;
  height: 100px;
  width: 100px;       
}

.box-blue {
  background: lightskyblue;
  height: 100px;
  width: 100px; 
  position: static;   // Declared as static
}
same result with & without position: static

Div’s are block elements by default, and that’s why they are not on the same line. I will explain this in another article.

2. Relative

position: relative: An element’s new position relative to its normal position.

Starting with 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 next to the blue one.

.box-orange {
  position: relative;  // We can now move the element
  background: orange;
  width: 100px;
  height: 100px;
  top: 100px;         // 100px from top relative to its old position
  left: 100px;        // 100px from left
}
Orange box is moved 100px to bottom & right, relative to its normal position
NOTE: Using position: relative for an element, doesn’t affect other elements’ positions.

Like the story so far? Check also my new YOUTUBE VIDEO SERIES about CSS Positioning:

3. Absolute

In position: relative, the element is positioned relative to itself.However, 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.

Since 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:

<body>
  <div class="container">
    <div class="box-orange"></div>
    <div class="box-blue"></div>
  </div>
</body>
.box-orange {
  position: absolute;
  background: orange;
  width: 100px;
  height: 100px;
}
position: absolute takes the element to the beginning of its parent

Now 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 5 pixels:

.box-orange {
  position: absolute;
  background: orange;
  width: 100px;
  height: 100px;
  left: 5px;
  top: 5px;
}
Now we can see the blue box

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>.

.container {
  position: relative;
  background: lightgray;
}

.box-orange {
  position: absolute;
  background: orange;
  width: 100px;
  height: 100px;
  right: 5px;    // 5px relative to the most-right of parent
}

4. Fixed

Like 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 5px 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.

5. Sticky

position: sticky can be explained as a mix of position: relative and position: fixed.

It behaves until a declared point like position: relative, after that it changes its behavior to position: fixed . The best way to explain position: sticky is by an example:

IMPORTANT: Position Sticky is not supported in Internet Explorer and earlier versions of Edge.


The best way to understand CSS Positioning is by practice. Keep coding until you have a better understanding. If something is not clear, I will answer your questions below in the comments section.

Thank you for your time & support! :)