# Mastering CSS Position in 2022.

### Confused with CSS Position...?

In this article, I will be breaking down all CSS position properties and explaining everything you need to know about them. This includes even the more obscure concepts related to the position that most articles/videos ignore.

# Prerequisite

To get the most out of this article, we need the following:

* Basic understanding of HTML.
    
* Basic understanding of CSS. (check out [CSS Selctors](https://akashkadlag.hashnode.dev/mastering-css-selectors))
    
* Visual studio code or any IDE of our choice to code along.
    

# CSS Positions

When building a webpage, there can be multiple elements on our page, each with their own positions, uses, and designs. It’s important to learn how we can arrange these elements and have control over their layout.

The position property in CSS determines how an element is positioned in a document. It specifies the type of positioning method for each element.

# Values of CSS Positions

The position property can have any of these values:

* static
    
* absolute
    
* relative
    
* fixed
    
* sticky
    

You can also specify the value of `inherit`, which means the value is determined from the parent element. The position value doesn’t cascade, so this can be used to specifically force it to, and inherit the positioning value from its parent.

# Placement Properties

Position property on its own is not that useful. It only says how the position should be calculated. For example, relative to the normal position of an element.

But we also need to define where exactly the element should be placed, not only how. There are several properties we can use for that.

* top
    
* left
    
* right
    
* bottom
    
* z-index
    

These define how much the element's position should be adjusted and in which direction.

# Normal Flow

Before going into details, let's see how these elements automatically get their position on your page. To understand this, you need to understand the normal flow of the web page. Normal flow is how the elements are arranged on a page if you haven't changed their layout.

There are two types of elements on a web page. Block-level elements and inline elements.

Block-level elements such as `<h1>`, `<div>`, `<p>` are contained on their own line. Because block-level elements start with a line break, two block-level elements can't exist on the same line without styling.

Inline elements such as `<a>`, `<img>`, `<span>`, don't form their own blocks. Instead, they are displayed within lines. They line up next to one another horizontally; when there isn't enough space left on the line, the content moves to a new line.

# Static Position

`position: static` is the default value provided by HTML. This means if we don’t declare position for an element in CSS, it will automatically be set to static.

Even though it is a default value, it can sometimes be useful to set it explicitly. For example, to override different position value, which is set elsewhere.

Elements that are statically positioned will follow the normal document flow and will position itself based on the standard positioning rules.

Unlike with other position values, when using `static`, placement properties such as `top`, `left`, `bottom`, `right`, or `z-index` have no effect.

**Example to illustrate Static Position :**

We are using the following HTML markup:

```html
<div class="parent">
    Parent
    <div class="one">
      One <br>
      position:static <br>
      top: 50px ( this has no effect )
   </div>
    <div class="two">Two</div>
    <div class="three">Three</div>
</div>
```

And here’s the CSS we’re using:

```css
.parent { 
   // No position set, so it's static 
} 
.one { 
   // No position set, so it's static 
   top: 50px; 
}
```

However, here is how it will look on a webpage:

![Screenshot 2022-07-25 at 7.17.38 PM.JPG](https://cdn.hashnode.com/res/hashnode/image/upload/v1658756921292/8UFyGALXz.JPG align="center")

View original code in [Codepen](https://codepen.io/KadlagAkash/pen/YzaxxbP)

Since both elements have a static position, none of the layout CSS properties will do anything. This makes the top property have no effect on how the element with class="one" is displayed.

# Relative Position

Relative position means that the element is placed relative to its original position in the page. A `relative` position element works exactly the same as `static` position, but you can now add `z-index`, `top`, `left`, `right`, and `bottom` properties to it.

If you make an element `relative` positioned without setting any of these extra properties you will notice it looks exactly the same as a static positioned element. This is because `relative` positioned elements also follow the normal document flow, but you can offset them using the `top`, `left`, `right`, and `bottom` properties.

**Example to illustrate Relative Position :**

We are using the following HTML markup:

```html
<div class="parent">
    Parent
    <div class="one">One</div>
    <div class="two">Two</div>
    <div class="three">Three</div>
</div>
```

And here’s the CSS we’re using:

```css
.one {
  position: relative;
  top: 15px;
  left: 15px;
}
```

However, here is how it will look on a webpage:

![Screenshot 2022-07-25 at 7.27.44 PM.JPG](https://cdn.hashnode.com/res/hashnode/image/upload/v1658757495117/1V2_mPpNX.JPG align="center")

View original code in [Codepen](https://codepen.io/KadlagAkash/pen/ZExJazz)

As a result of an element being moved from its original position, there can be a situation, where multiple elements overlap each other. Fortunately, with `z-index` property, you can control which elements should be in the front and which in the back. We'll discuss this in more detail later.

Only `relative` position is not that useful as you do not usually want to offset an element without also moving all the elements around it. The main use cases for position `relative` are to either set the `z-index` of the element, or to be used as a container for `absolute` positioned elements which we will talk about next.

# Absolute Position

The `absolute` position completely removes the element from the normal document flow. If you give an element position `absolute` all other elements will act as if the `absolute` positioned element doesn't even exist.

An element using `position: absolute` is positioned relative to the nearest ancestor. In other words, an element with `position: absolute` is positioned relative to its parent element.

If an element doesn’t have a parent element, it’s placed relative to its initial containing block. It can then be positioned by the values of top, right, bottom, and left.

> Note : If we don’t specify helper properties, it’s positioned automatically to the starting point (top-left corner) of its parent element.

**Example to illustrate Absolute Position :**

We are using the following HTML markup:

```html
<div class="parent">
    Parent
    <div class="one">One</div>
    <div class="two">Two</div>
    <div class="three">Three</div>
</div>
```

And here’s the CSS we’re using:

```css
.parent {
  position: relative;
}

.one {
  position: absolute;
  top: 0;
  right: 0;
}
```

However, here is how it will look on a webpage:

![Screenshot 2022-07-25 at 8.38.13 PM.JPG](https://cdn.hashnode.com/res/hashnode/image/upload/v1658761720014/_FII-qujq.JPG align="left")

View original code in [Codepen](https://codepen.io/KadlagAkash/pen/OJvjzmV)

By setting the blue parent element to a position of relative I am now forcing the absolute positioned child one element to be in the top right corner of the parent instead of the body. This combination of relative and absolute positions is incredibly common.

# Fixed Position

The `fixed` position is a bit like `absolute` position in that it removes the element out of the normal flow, but `fixed` position elements are always positioned in the same place in the viewport (what’s visible on screen). This means that scrolling will not affect its position at all.

**Example to illustrate Fixed Position :**

We are using the following HTML markup:

```html
<div class="parent">
    Parent
    <div class="one">One</div>
    <div class="two">
       Two <br>
       Ha ha! Scrolling can't get rid of me!!
    </div>
    <div class="three">Three</div>
</div>
```

And here’s the CSS we’re using:

```css
.two {
  position: fixed;
  top: 0;
  right: 0;
}
```

However, here is how it will look on a webpage:

%[https://codepen.io/KadlagAkash/pen/PoRKEMG] 

View original code in [Codepen](https://codepen.io/KadlagAkash/pen/PoRKEMG)

The pink fixed element will stay positioned at the top and right corner of the viewport. And if you scroll, the blue parent element and other child elements will scroll up normally, but the pink element will remain stuck to where we positioned it.

> Tip: A fixed element must have a top or bottom position set. If it doesn’t, it will simply not exist on the page at all.

You have to be careful with `fixed` position usage. On a mobile device with a small screen, it can be a big deal if a large portion of your screen is always covered with a navigation bar or something similar. It dramatically reduces space for the actual content of your page and can significantly limit usability.

# Sticky Position

The `sticky` position is a combination of both `fixed` and `relative` position and combines the best of them both.

An element with position sticky will act like a `relative` positioned element until the page scrolls to a point where the element hits the `top`, `left`, `right`, or `bottom` value specified. It will then act like a fixed position element and scroll with the page until the element gets to the end of its container.

> In other words, elements set with `position: sticky` are positioned based on the user’s scroll position.

As of this writing, it is currently an experimental value, meaning it is not part of the official spec and is only partially adopted by select browsers. In other words, it’s probably not the best idea to use this on a live production website.

**Example to illustrate Sticky Position :**

We are using the following HTML markup:

```html
<div class="parent">
    Parent
    <div class="one">One</div>
    <div class="two">
       Two <br>
       I stick at the top <br><br>
       position: sticky <br>
       top: 0px;
    </div>
    <div class="three">Three</div>
</div>
```

And here’s the CSS we’re using:

```css
.two {
  position: sticky;
  top: 0;
}
```

However, here is how it will look on a webpage:

%[https://codepen.io/KadlagAkash/pen/eYMEQJm] 

View original code in [Codepen](https://codepen.io/KadlagAkash/pen/eYMEQJm)

`sticky` position is the perfect position for navbars that scroll with the page, headings in long lists, and many other use cases.

# Z-index

When working with position other than static, elements can easily appear in position, where they overlap each other.

This is where the `z-index` property comes in. When you have elements overlapping, we use `z-index` to stack them. It controls the position of your elements on the z-axis.

![agY_-dPfE.jpeg.webp](https://cdn.hashnode.com/res/hashnode/image/upload/v1658799878872/eQpzRJ_t8.webp align="center")

You can use `z-index` like this:

```css
 z-index: 1;
```

The `z-index` gives you the ability to decide how the elements should overlap each other, in which order. If you give a higher `z-index` value, that particular element will appear closer to the viewer. In other words, it will appear on top of the other elements.

**Example to illustrate Z-index:**

We are using the following HTML markup:

```html
<div class="parent">
    Parent
    <div class="one">One</div>
    <div class="two">
       Two <br>
       I stick at the top <br><br>
       position: sticky <br>
       top: 0px;
    </div>
    <div class="three">Three</div>
</div>
```

And here’s the CSS we’re using:

```css
.first{
  z-index: 3;
}

.second{
  z-index: 2;
}

.third{
  z-index: 1;
}

.four{
  /* No z-index */
}

.fifth{
  z-index: -1;
}
```

However, here is how it will look on a webpage:

%[https://codepen.io/KadlagAkash/pen/jOzLQGg] 

View original code in [Codepen](https://codepen.io/KadlagAkash/pen/jOzLQGg)

# Summary

Let's sum it up. The `position` property allows you to determine how elements should be placed on the page.

You can define the exact location using `top`, `bottom`, `right` and `left` properties.

In case your elements overlap each other, you can change their order using `z-index`. The higher the index, the closer is the element to the user.

**static**

* Default value
    
* Positioning as usual, same as if you didn't specify the position
    

**relative**

* The element is placed relative to its normal position on the page
    
* The place occupied by the element is preserved at its original location
    

**absolute**

* The element is removed from the normal flow and does not occupy space
    
* The location is determined relative to the first parent set position (other than `static`)
    
* If there is no such parent, it is determined relative to the whole page.
    

**fixed**

* The element is removed from the normal flow and does not occupy space
    
* The location is determined relative to the viewport
    
* Elements keep their locations as you scroll
    

**sticky**

* Elements are positioned relatively until you reach them by scrolling
    
* Then the elements stick to one location, similar to fixed positioning
    
* Not supported by all the browsers, you can check out the current support on [CanIUse.com](https://caniuse.com/css-sticky).
    

# In closing

I hope that you’ve found this tutorial and code examples on CSS positioning helpful...! If you have any questions or feedback, feel free to leave a comment below.

If you found this article helpful, please like and share it 💙.

That's all for today! 😁 You reached the end of the article 😍.

## Other Resources

Check out some of these resources for a more in-depth look into CSS Positions :

* [MDN CSS Positions](https://developer.mozilla.org/en-US/docs/Web/CSS/position)
    
* [WDS CSS Positions](https://youtu.be/jx5jmI0UlXU)
    
* [CSS Positions](https://css-tricks.com/almanac/properties/p/position/)
    

## Want more..?

I write articles on [blog.yntp.me](https://yntp.me), and also post development-related content on the following platforms:

* [Twitter/X](https://twitter.com/yntpdotme)
    
* [**LinkedIn**](https://www.linkedin.com/in/yntpdotme)