# CSS :Positions

# Introduction

The element is positioned in a document by using the CSS position property. The final location of the element is determined by the  __top__, __right__, __bottom__, and __left__. Positioning makes the elements go out of normal document flow and make them behave differently.

There are five types of positions. They are
- Static
- Relative
- Absolute
- Fixed
- Sticky

# 1.Static
Every element gets a static position by default. The top, right, bottom, and left properties do not affect static elements.



 code for static:
```
<style>
        .position{
            display: flex;
            gap:10px;
        }
        .frontend{
            height:100px;
            width:100px;
            background-color: black;
            color:#fff;
            text-align: center;

        }
        .html{
            position:static
        }
    </style>```




```
<div class="position">
        <p class="frontend html">HTML</p>
        <p class="frontend css">CSS</p>
        <p class="frontend js">Javascript</p>
        <p class="frontend react">React</p>
        <p class="frontend angular">Angular</p>
    </div>```

Output for static:


![Screenshot (1601).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669199516207/qXYW96uYD.png align="left")

# 2.Relative
Relative elements are positioned based on their original position. Top, left, bottom, and right values do not affect the positions of other elements in the document.

code for relative:

```
.position{
            display: flex;
            gap:10px;
        }
        .frontend{
            height:300px;
            width:300px;
            background-color: black;
            color:#fff;
            text-align: center;
            font-size:20px;

        }
        .html{
            position:static
        }

        .css{
            position: relative;
            top:100px;
            left:100px;
        }```
```
<div class="position">
        <p class="frontend html">HTML</p>
        <p class="frontend css">CSS</p>
        <p class="frontend js">Javascript</p>
        <p class="frontend react">React</p>
        <p class="frontend angular">Angular</p>
    </div>```

Output for relative:

![Screenshot (1602).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669199930520/AorSU-4if.png align="left")

# 3.Absolute
Absolute elements are positioned to the parent's element position. Its final position is determined by top, bottom, right, and left values. The original position of the selected element's space will be occupied by the other neighboring elements.

code for absolute:

```
.position{
            display: flex;
            gap:10px;
        }
        .frontend{
            height:300px;
            width:300px;
            background-color: black;
            color:#fff;
            text-align: center;
            font-size:20px;

        }
        .html{
            position:static
        }

      .js{
            position:absolute;
            left:100px;
            background-color: red;
        }```
```
<div class="position">
        <p class="frontend html">HTML</p>
        <p class="frontend css">CSS</p>
        <p class="frontend js">Javascript</p>
        <p class="frontend react">React</p>
        <p class="frontend angular">Angular</p>
    </div>
    ```
output for absolute:

![Screenshot (1603).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669200891426/Jn8Z9cD8m.png align="left")

# 4.Fixed
Fixed elements are positioned relative to the viewport which means it always stays in the same place even if the page is lengthy and scrolled. The final position of the element is determined by the top, left, right, and bottom values.

A fixed element does not leave a gap in the page where it was located before.

code for fixed:

```
.position{
            display: flex;
            gap:10px;
        }
        .frontend{
            height:300px;
            width:300px;
            background-color: black;
            color:#fff;
            text-align: center;
            font-size:20px;

        }
        .html{
            position:static
        }

   .js{
            position:absolute;
            left:100px;
            background-color: red;
        }

        .react{
            position:fixed;
            bottom:100px;
            right:100px;
        }```
```
<div class="position">
        <p class="frontend html">HTML</p>
        <p class="frontend css">CSS</p>
        <p class="frontend js">Javascript</p>
        <p class="frontend react">React</p>
        <p class="frontend angular">Angular</p>
    </div>```

output for fixed:

![Screenshot (1604).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669202262461/Wqwj7cFZU.png align="left")

# 5.Sticky
An element with position: sticky; is positioned based on the user's scroll position.
A sticky element is between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position: fixed).