# CSS Positioning.

## What is CSS positioning?

CSS position is the location where an element will be placed in a document. Using the top, bottom, right, and left attributes, you can specify the exact position of an element.

Knowing how to properly layout elements is very essential when it comes to designing a webpage layout. There are different methods to aligning elements on a webpage with CSS and they are; display, float and the position property.

In this article, we'll learn what the CSS position property is, it's five different values and how to use offset properties to set the final position of elements.

There are five CSS positioning types:

* Static
    
* Relative
    
* Absolute
    
* Fixed
    
* Sticky
    

Let’s look

**Static Positioning**

This is the default positioning of elements in a document. It positions them from top to bottom.there is absolutely no need to set elements to `position: static` for it as it is the default position of every HTML element in a webpage.

The code snippet below shows a static positioned element by default.

HTML

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1597658404274/USpp5a-ag.png?auto=compress,format&format=webp align="left")

CSS

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1597658429120/n-QTTRDZw.png?auto=compress,format&format=webp align="left")

Result

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1597658481248/Xzv_nYkem.png?auto=compress,format&format=webp align="left")

**Relative positioning**

When an element assumes this position, it is placed relative to its initial position. However, should you use it and not indicate the top, right, left, or bottom coordinates, it will assume a static position.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1597660426212/69AessF7b.png?auto=compress,format&format=webp align="left")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1597660412901/w0mGxKyR0.png?auto=compress,format&format=webp align="left")

**Note**: The space where the relatively positioned element occupied prior to setting the offset properties stays intact and the contents surrounding it are not affected either.

Besides, a parent with a relative positioning allows you to absolutely position child elements within it. As such, you can position the elements anyhow you want.

**Absolute positioning**

Yet another powerful CSS positioning type that allows you to position elements where you want them.

It allows you to ignore the normal document flow by setting the top, right, bottom, and left attributes.

The values have to be relative to the parent element with relative positioning.

If there lacks a parent, the element will position itself relative to the HTML document. This position does not affect adjacent elements.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1597660537215/CA57fuhBe.png?auto=compress,format&format=webp align="left")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1597660869476/cYQ-M8z0e.png?auto=compress,format&format=webp align="left")

> ***The above results shows that the*** `.sibling` element uses the offset properties; top and left to position itself by assuming the body as the parent.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1597661487951/6XVdJHCjR.png?auto=compress,format&format=webp align="left")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1597661514655/zRxVt8SfY.png?auto=compress,format&format=webp align="left")

> ***The results displayed above shows that the*** `.sibling` element is positioned 100px from the top and 120px from the left relative to the `.child` element.

**Note** that if an element is positioned absolute, the normal position collapses and the element is removed from the document flow in contrast to relative positioning. The other elements surrounding it ignores the space completely.

**Fixed positioning**

As the name suggests, the element is fixed to its position when you scroll the page.

That said, it assumes an absolute position allowing you to set the top, bottom, left, and right attributes.

Remember the element is positioned relative to the viewport.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1597659467725/Qm0ayFfAv.png?auto=compress,format&format=webp align="left")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1597659524945/1KOq__TDj.png?auto=compress,format&format=webp align="left")

**Sticky positioning**

Like the static position, sticky positioning positions elements according to normal document flow.

While fancy, not all browsers support it. As you scroll through the page, the element assumes a relative position until the viewport location reaches the specified point.

Here, the *home* section is sticky.  

<iframe height="600" src="https://codepen.io/samlancoder/embed/WNXZWNW?height=600&default-tab=result&embed-version=2" style="box-sizing:border-box;width:678.438px;border:0px;margin:0 0 var(--content-rhythm) 0;color:rgb(23, 23, 23);font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";font-size:20px;font-style:normal;font-variant-ligatures:normal;font-variant-caps:normal;font-weight:400;letter-spacing:normal;orphans:2;text-align:start;text-indent:0px;text-transform:none;white-space:normal;widows:2;word-spacing:0px;-webkit-text-stroke-width:0px;background-color:rgb(255, 255, 255);text-decoration-thickness:initial;text-decoration-style:initial;text-decoration-color:initial"></iframe>

I hope you find this article helpful.