CSS Position Property Simplified.
Published: 2023-05-02 18:13:34


**Positioning** in CSS can be very tricky. I remember when I first started learning CSS, this particular concept of CSS was so daunting that I was confused for a whole week. Thankfully, due to some research and constant practice, I scaled through that hurdle.

In this article, we will learn about the CSS position property and the different position types. We will also be reviewing how we can position elements to create an engaging webpage.

**Prerequisites**

- Basic understanding of HTML.
- Basic understanding of CSS.
- Code editor.

**What is CSS Position Property?**
CSS Position Property is a concept in CSS that specifies how an element is positioned in an HTML document. This Property is used with the top, right, bottom, and left CSS properties to determine how an element is displayed in a web page.

The Position Property works with five values. They are:

1. Static
2. Relative
3. Absolute
4. Fixed
5. Sticky

Let's discuss about them briefly, shall we?

## Static
`Position: static` is the default positioning of all HTML documents in the webpage. Essentially, what `position: static` does is that, it follows the other element accordingly in the document flow. That is, the first element will be above the second element, the second will be above the third and so on.

Let's use an example to further buttress our point.

> _Note : We will  be using this HTML `code` snippet below for the entire article to demonstrate how these position values work._

```html
 
 <html>
   <body>
       <section class="parent">
          <div class="first-child">
              I'm the first child element.
          </div>
        
          <div class="second-child">
              Second Child(Main Element)
          </div>
        
          <div class="third-child">
              I'm the third child
          </div>
       </section>
   </body>
 </html>
    
```
Our basic HTML structure with a parent element and three child elements.

For the CSS.

```CSS
.parent {
    color: black;
    border: 1px solid black;
    padding: 10px 0;
    margin-top: 5rem;
}

.second-child {
    background-color:  #FF5C35;
}

div {
    width: 300px;
    height: 70px;
    text-align: center;
    padding-top: 45px;
    background-color:  grey;
    margin-bottom: 6px;
    border-radius: 10px;
  }
```

The Output
![Static CSS Position Property image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cidnul9c85kzbwsfq0gr.png)

If you noticed, in our CSS `code` we haven't apply a position property to any of the elements but check the blue arrow in our output and you can tell that all the elements are static at default. This is possible because the `position: static` maintains a default document flow of elements.


Now, let's apply a position property and see what happens.

```CSS
.parent {
    color: black;
    border: 1px solid black;
    padding: 10px 0;
    margin-top: 5rem;
}

.second-child {
    background-color:  #FF5C35;
    position: static;
}

div {
    width: 300px;
    height: 70px;
    text-align: center;
    padding-top: 45px;
    background-color:  grey;
    margin-bottom: 6px;
    border-radius: 10px;
  }
```

The Output.


![Static CSS Position Property image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2fo50fi2f78eqvsn611w.png)

Nothing changed. It didn't change because that is the default behavior for `position: static` elements.


## Relative
`Position: relative` acts exactly like the `position: static` but it allows you to do four specific things that  `position: static` doesn't  do. That is, you can offset the position of the element relative to itself by using the **top**, **right**, **bottom**, and **left** properties.

Let's apply `position: relative` and offset values to our second child element.

```CSS
.parent {
    color: black;
    border: 1px solid black;
    padding: 10px 0;
    margin-top: 5rem;
}

.second-child {
    background-color:  #FF5C35;
    position: relative;
    top: 40px;
    left: 40px;

}

div {
    width: 300px;
    height: 70px;
    text-align: center;
    padding-top: 45px;
    background-color:  grey;
    margin-bottom: 6px;
    border-radius: 10px;
  }
```
Here, we have applied our `position: relative` and added an offset value of 40px for both **top** and **left** property.

The Output.


![Relative CSS Position Property Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bcvnb7cpihq44dd9pjgv.png)

From the image above, you can see that the element still maintains that default document flow but the position has be altered because we have offset it by 40 pixels down (with the **top** property) and 40 pixels to the right (using the **left** property). 

> <u>Fun Tip</u> : You can try out the bottom and right properties respectively and see the outcome.


## Absolute
`Position: relative` completely removes the element from the document flow and everything else renders as if the absolute element doesn't exist at all. It's essentially useful when you want to stick an element in a specific position and you don't want any other thing to move around it. 

> One thing you should know about `position: absolute` elements is that, they are absolutely positioned to a parent element they can make reference to.

Let's try out an example.

```CSS
.parent {
    color: black;
    border: 1px solid black;
    padding: 10px 0;
    margin-top: 5rem;
}

.second-child {
    background-color:  #FF5C35;
    position: absolute;
    width: 210px;
}

div {
    width: 300px;
    height: 70px;
    text-align: center;
    padding-top: 45px;
    background-color:  grey;
    margin-bottom: 6px;
    border-radius: 10px;
}
```
The Output.

![Absolute CSS Position Property Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zyd9ci1ya8wse09e7nnu.png)
Here the element is removed from the document flow and it sits on top of the third child.

Lets apply a position property to our parent element and see how they both work together.

```CSS
.parent {
    padding: 30px 0;
    position: relative;
}

.second-child {
    position: absolute;
    top: 10px;
    left: 30px;
}
```
The Output.

![Absolute CSS Position Property Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z3evfp3l88vmj8ydzdc7.png)
We applied `position: relative` to our parent element and offset the second child position with a **top** of 10 pixels and **left** of 30 pixels. From the image above, you would notice that the second child is absolutely positioned relatively to its parent element.

> _Note : The parent element can be assigned with a position of either relative, fixed, absolute or relative but not static._

## Fixed
Elements that are `position: fixed` stays in a particular position in your webpage as you scroll, they are not affected by scrolling. They are also removed from the default document flow and are positioned relatively to the viewpoint of the HTML document unlike the `position: absolute` that are positioned in reference to their parent element.

Check the code below.

```CSS
.parent {
    color: black;
    border: 1px solid black;
    padding: 30px 0;
    margin-top: 5rem;
    position: relative;
    height: 100vh;
    max-width: 500px;
    margin: 50px auto 50px auto;
    background-color: cornflowerblue;
}

.second-child {
    background-color:  #FF5C35;
    position: fixed;
    bottom: 20px;
    left: 30px; 
}

div {
    width: 300px;
    height: 70px;
    text-align: center;
    padding-top: 45px;
    background-color:  grey;
    margin-bottom: 6px;
    border-radius: 10px;
}
```
Here we have extended the height of our parent element and position it in the center of the page with a background color to aid a more appealing visual representation.

The Output.

![Fixed CSS Position Property Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0xzhye79kop5s939u4fc.gif)
 
From the screen record above, we can see that the `position: fixed` element still maintains its initial position regardless of the scrolling and it is positioned outside the parent container but relative to the viewpoint.

> _**The viewport is the area of a web page that's visible to the user.**_

##Sticky
The `position: sticky` is a combination of  both `position: relative` and `position: fixed`. Elements that have a sticky position are relatively positioned at default until a certain viewpoint is attained, then they behave like the fixed position.

You will understand it better from our code and output below.

```CSS
.parent {
    color: black;
    padding: 80px 0;
    margin-top: 5rem;
    position: relative;
    height: 200vh;
    max-width: 500px;
    margin: 50px auto 50px auto;
    background-color: cornflowerblue;
}

.second-child {
    background-color:  #FF5C35;
    position: sticky;
    top: 10px;
}

div {
    width: 300px;
    height: 70px;
    text-align: center;
    padding-top: 45px;
    background-color:  grey;
    margin-bottom: 6px;
    border-radius: 10px;
}
```

The Output

![Sticky CSS Position Property Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sh9b41md1glsgmou2o82.gif)
From the screen record above, you can see how the second child was positioned relatively at default until we started scrolling and when the element gets to the top of the view point, it was fixed at a particular position ten pixels away from the top viewpoint.

## Conclusion
And it's a wrap guys! We have covered quite a lot on the CSS position property. I hope I have been able to dissect this CSS concept in a comprehensive manner for you to build great webpages with this cool feature. Remember, for you to be good and confident at CSS, you need to practice constantly and build projects. Goodluck!