Position in CSS

What is position and why is it used?

Position property in CSS is used to set position of elements in the webpage.

Values

Static
Relative
Absolute
Fixed

Let's try to understand them one-by-one

1. Static

This is the default value every element has in the normal flow of document. The top, bottom, left, right and z-index have no effect.

Let's take an example to understand it better

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Positions in CSS</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="sub-container one"></div>
      <div class="sub-container two"></div>
      <div class="sub-container three"></div>
    </div>
  </body>
</html>

style.css

* {
  margin: 0;
  padding: 0;
  outline: 0;
}

.container {
  margin: 100px;
  background-color: #add8e6;
  border: 2px solid #000000;
  width: 400px;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.sub-container {
  border: 2px solid #a52a2a;
  height: 100px;
  width: 100px;
  color: #ffffff;
  margin: 20px;
}

.one {
  background-color: #ffa500;
}
.two {
  background-color: #4e2121;
}
.three {
  background-color: #a014a0;
}

Output

These all elements have a default position value of static. So, if we even if we specify position : static, it won't make any difference.

2. Relative

In case of relative position, the effect is same as static by default but in this we can add top, bottom, right and left. It will move the element relative to the parent element. So, if we give top : 10px, then that element will move 10px from it's default position. In this the element is not removed from the normal document flow.

.one {
  position: relative;
  top: 10px;
  background-color: #ffa500;
}

Output

3. Absolute

In case of absolute position, the element is removed from the normal document flow and it is positioned with respect to the closest positional ancestor if any, else it will positioned itself with respect to the body of the webpage. The position can be specified using top, left, right and bottom.

.one {
  position: absolute;
  top: 10px;
  background-color: #ffa500;
}

Output

As you can see that the container aligns itself with respect to the body of webpage as it does not have any positional ancestor. If we mark the position of it's parent as relative, it will align with respect to it's parent which will result in something like this

4. Fixed

In case of fixed position, the element is removed from the normal document flow and it is positioned with respect to the body of the webpage. The position can be specified using top, left, right and bottom.

.one {
  position: fixed;
  top: 20px;
  background-color: #ffa500;
}

Output

These were some positions in CSS. Surely there are some more to explore. You can explore more of them here (references for this article) :

Positions in CSS

Thank you for reading this article, I hope you have learnt something new and valuable. See you in the next article!