CSS Positioning

The position CSS property

The position property tells the browser how an element should be positioned on the page. By default the value of position is static, but we can modify it to be any of the following values: relative, absolute, fixed, sticky. In this post, I will go over each of them.

Let's take an example for a better understanding

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="./styles.css" />
    <title>CSS positions</title>
    <style>
      .container {
        background-color: blue;
        padding: 20px;
      }

      .container > div {
        padding: 15px;
      }

      .container span {
        margin-bottom: 20px;
      }

      .first {
        background-color: orangered;
      }

      .second {
        background-color: white;
      }

      .third {
        background-color: green;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <span>Container</span>
      <div class="first">Orange</div>
      <div class="second">White</div>
      <div class="third">Green</div>
    </div>
  </body>
</html>

Static

This is the default value of the position property. If the position of an element is static, the element will render in order, based on its position of it in the original document flow.

Relative

If we set the position of an element to a relative, it will appear in the document as it would by default using static. The trick is that by setting position relative, we gain access to the following CSS properties: top, left, right, and bottom. With these, we can add an offset to the specific direction. So for example if we set left: 20px. The element will be placed 20 pixels to the right. If we would have provided -20px it would push the content to the left with 20px.

.second {
        background-color: white;
        position: relative;
        left: 20px;
      }

Fixed

With fixed positioning, we also have access to the top, left, right, and bottom properties. In this case, the element is positioned relative to the browser window's viewport.

So if we set the top 70px and left 20px on a fixed positioned element it will appear 70 pixels from the top of the viewport and 20px from the left edge of the viewport. Fixed positioning also removes the document from the normal document flow.

.second {
        background-color: white;
        position: fixed;
        left: 20px;
        top: 70px;
      }

Absolute

Absolute positioning is working like the fixed positioning, but it is not positioned relative to the viewport, but instead, it is positioned based on the closest positioned element (which has a position other than static). If there are no positioned parents it will be positioned relative to the viewport.

.container {
        background-color: blue;
        padding: 20px;
        position: relative;
      }

.second {
        background-color: white;
        position: absolute;
        left: 20px;
        top: 70px;
      }

Conclusion

This is a small blog where I covered almost all concepts related to css positioning if you read this blog carefully you will never get stuck around positioning works and the most important part is to open your vs code and try all of these conditions then and then only you will understand it forever. If any suggestions please mention them.

Referances

mdncss

Shallow Copy vs Deep Copy