CSS position property.

Building a layout of a page CSS has position properties that make your work done with minimum codes and you create a great layout for your website. These positioning properties help you to manipulate the HTML element. In an HTML document if you want to manipulate the HTML element position there are well-defined CSS position properties are available.

There are 5 types of properties as follows:

Static.
Relative.
Absolute.
fixed.
sticky.

Static.

The position of every element in CSS is static by default. So according to the position static elements will stick to the normal page flow. Properties like left, right, top, and bottom do not affect the property static.

HTML.

   <div class="main-element">
        I am the main element at this time.
    </div>

CSS.

.main-element {
    position: static;
    left: 10px;
    bottom: 10px;
    background-color: yellow;
    padding: 10px;
}

Relative.

In Relative if you want to move your element wherever you want from its normal flow, shift an element to the top, right, bottom, or left. This does not affect the position of the other elements.

Example:

CSS.

Result.

Here box3 is moved from its normal flow. In example you move box3 10px from top (top to its normal flow) and 50px from the left. You can use offset properties(top, bottom, left, right) to know how far to move the element from where it would have been in normal flow.

Absolute.

Position absolute work according to the parent element. If there is no parent div is there it works according to the body of a document. It means absolute element in relation to its containing element. It does not affect the position of any surrounding element. Example.

<div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>

CSS

 .box1 {
            position: absolute;
            top: 50px;
            left: 300px;
            height: 10vh;
            width: 10%;
            border: 1px solid #120E43;
            background-color: purple;
        }

Result.

Fixed

In fixed position element is in the relation to the browser window, as referred to as the containing element. when the user scrolls up the page fixed elements do not affect the surrounding elements and they don't move.

Example.

<div class="box1"></div>
    <div class="box2">FIXED</div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div>Lorem1000 </div>

CSS.

  .box2 {
            position: fixed;
            margin-left: 200px;
            height: 10vh;
            width: 10%;
            border: 1px solid #120E43;
            background-color: #BF3312;
            color: white;
        }

Result.

Sticky

When you position sticky it acts like it's a mixture of both position: relative and position:fixed. BUT WHY? It acts like a relatively positioned element until a certain scroll point and then it acts like a fixed element. Example.

<body>
    <div class="box1"></div>
    <div class="box2">Sticky now</div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div>Lorem1000</div>
</body>

CSS.

.box1 {
            height: 10vh;
            width: 10%;
            border: 1px solid #120E43;
            background-color: purple;
        }

        .box2 {
            position: sticky;
            top: 10px;
            margin-left: 200px;
            height: 10vh;
            width: 10%;
            border: 1px solid #120E43;
            background-color: #BF3312;
            color: white;
        }

        .box3 {
            /* position: relative; */
            top: 10px;
            left: 50px;
            height: 10vh;
            width: 10%;
            border: 1px solid #120E43;
            background-color: #3DBE29;
        }

        .box4 {
            height: 10vh;
            width: 10%;
            border: 1px solid #120E43;
            background-color: #5A20CB;
        }

Result.

Thank you.

Positioning in CSS.

CSS positioning properties are very important if you want to jump into the CSS in deep.

Table of contents

CSS position property.

Static.

Relative.

Absolute.

Fixed

Sticky