CSS Positioning - A quick guide
Published: 2022-11-21 13:44:50

To make our web pages look good we have to position elements in our web pages in specific ways. To control the position of an element we use the position property in CSS. In this article, we are going to talk about different position properties in CSS.

 Position property controls the location of an element in the document, and the final position is determined by the `top` `left` `right` `left` and `z-index` properties. position property takes five different values `static` `relative` `absolute` `fixed` `sticky`, we are going talk about them one by one.

### position: static
This is the default position of every element in the document. If you set the `top` `left` `right` `left` and `z-index` properties, on an element with a position set as static there would be no changes in the position of the element. Let’s have a look at the example below.
```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>Positioning</title>
  </head>
  <style>
    .box {
      background-color: #242b2e;
      height: 100px;
      width: 100px;
      font-size: 20px;
      text-align: center;
      color: #ffffff;
      display: inline-block;
    }
    .box-1 {
      top: 40px;
    }
  </style>
  <body>
    <div class="box box-1">1</div>
    <div class="box box-2">2</div>
    <div class="box box-3">3</div>
    <div class="box box-4">4</div>
    <div class="box box-5">5</div>
  </body>
</html>
```

![sketchpad.pro_FDDCA4B69443312B68F (1) (1).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1668871140344/oUAawoJd8.png)
In the above code as you can I have 5 `div` elements, and I didn’t apply position property to the box class so by default all five boxes are positioned as static, so applying t`op:40px` on box-1 would not show any changes. 

### position: relative
`position: relative` is similar to `position: static`, The element is positioned the same as the flow of the document, but we can change the position of the element by using the `top` `left` `right` `left`, and `z-index` properties. Let’s have a look at an example.

```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>Positioning</title>
  </head>
  <style>
    .box {
      background-color: #242b2e;
      height: 100px;
      width: 100px;
      font-size: 20px;
      text-align: center;
      color: #ffffff;
      display: inline-block;
    }
    .box-1,
    .box-3,
    .box-5 {
      position: relative;
      top: 40px;
    }
  </style>
  <body>
    <div class="box box-1">1</div>
    <div class="box box-2">2</div>
    <div class="box box-3">3</div>
    <div class="box box-4">4</div>
    <div class="box box-5">5</div>
  </body>
</html>
```

![Screenshot from 2022-11-19 19-16-48.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1668871239461/4K1FVCy2W.png)
in the above example, I have applied `position: relative` and `top:40px` to the `div` element with class box-1, box-3, and box-5, and these three elements moved 40px downward from their original position.

### position: absolute
Element with `position: absolute` is completely removed from the original document flow. With the help of `top` `left` `right` `left`, and `z-index` properties, we can position this element anywhere relative to its closest parent. When an absolute positioned element has no positioned parent element, it uses the document body, Let’s try to get this clear with an example.
```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>Positioning</title>
  </head>
  <style>
    .box {
      background-color: #242b2e;
      height: 100px;
      width: 100px;
      font-size: 20px;
      text-align: center;
      color: #ffffff;
      display: inline-block;
    }

    .box-3 {
      position: absolute;
      bottom: 10px;
      right: 10px;
    }
  </style>
  <body>
    <div class="box box-1">1</div>
    <div class="box box-2">2</div>
    <div class="box box-3">3</div>
    <div class="box box-4">4</div>
    <div class="box box-5">5</div>
  </body>
</html>
```

![Screenshot from 2022-11-19 19-36-58.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1668871395525/buYB94ylM.png)
In the above example, I have applied an absolute position to the 3rd box 
`.box-3{position: absolute;bottom:10px;right:10px}` and as you can see 3rd box has been removed from the original document flow and has been positioned according to the `bottom:10px;right:10px` properties. in our example, there is no parent element to the box elements so the box is positioned relative to the document body.

### position: fixed

Element with `position: fixed` is completely removed from the document flow just like the `position: absolute`. When we apply `position: fixed` to the element is positioned relative to the document body not to the parent element. Element with fixed position is also not affected by the scrolling effect.
```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>Positioning</title>
  </head>
  <style>
    .box {
      background-color: #242b2e;
      height: 100px;
      width: 100px;
      font-size: 20px;
      text-align: center;
      color: #ffffff;
      display: inline-block;
    }

    .box-3 {
      position: fixed;
      top: 200px;

    }
  </style>
  <body>
    <div class="box box-1">1</div>
    <div class="box box-2">2</div>
    <div class="box box-3">3</div>
    <div class="box box-4">4</div>
    <div class="box box-5">5</div>
    <p>
     very very long text content, so that we can have a scroll.
    </p>
    
  </body>
</html>
```

![ezgif.com-gif-maker (2).gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1668871948354/thhkMxpK5.gif)
in the above example, I have given `.box-3{position:sticky;top:0}` to box3 and it’s position does not change on scroll. 

### position: sticky
Element with `position: sticky` is like position: relative it remains in the original document flow until the user scroll when the user scrolls the element with position sticky get fixed based on any of the `top` `left` `right` `left`, and `z-index`  properties.
```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>Positioning</title>
  </head>
  <style>
    .box {
      background-color: #242b2e;
      height: 100px;
      width: 100px;
      font-size: 20px;
      text-align: center;
      color: #ffffff;
      display: inline-block;
    }

    .box-3 {
      position: sticky;
      top: 0;
    }
  </style>
  <body>
    <div class="box box-1">1</div>
    <div class="box box-2">2</div>
    <div class="box box-3">3</div>
    <div class="box box-4">4</div>
    <div class="box box-5">5</div>
		<p>
     very very long text content, so that we can have a scroll.
    </p>
  </body>
</html>
```

![ezgif.com-gif-maker (3).gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1668872322379/tYl3K1bej.gif)
In the above example, I have applied `.box-3{position: sticky;top:0}`, As you can see in the above example box3 sticks to the top when we scroll,  you must have seen these types of the navbar on any website.

### Conclusion
That’s it for this article, write your feedback in the comment section.