Learn CSS Positions: with Real Examples
Tags: css, webdev, beginners, codenewbie
Published: 2024-06-27 10:41:11

Let's start with even do you need CSS positions aren't the other properties enough to make you faint? Why CSS positions?

Say you want to create an navigation bar which stays on the page when you scroll, or the chat with us icon/button that stays on the bottom right corner always. This things are placed outside of the document's (i.e the webpage) workflow.

For examples, You see below the chat button or the navigation bar is still visible even after scrolling.

![CSS Position](https://github.com/J11tendra/NerdNarratives/blob/main/learn-css-positions/assets/css-positions-1.gif?raw=true)

To build elements having similar behavior we use `CSS position`.

The `CSS position` property is used to define the position of an element on a webpage.

The position property has the following five values:

- static (default value)
- relative
- absolute
- fixed
- sticky

We will look into each of them.

Before we begin lets first understand the basic context; we have a very basic `div` which contains 9 more boxes each with different color and also has a number on it.

## CSS Static Position (default value)

The `position: static` property allows elements to be positioned in the normal flow of the document.

```

Note: This is the default value.

```

The below boxes has `position: static;`.

<!-- Eg of static -->

![Position static](https://github.com/J11tendra/NerdNarratives/blob/main/learn-css-positions/assets/position-static-2.png?raw=true)
[Eg codesandbox link](https://codesandbox.io/p/sandbox/learn-css-positioning-k859pg?file=%2Fstyles.css&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clxsp6vm200062869nysqztgl%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clxsp6vm2000228696ojapkvm%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clxsp6vm200032869mc9tkczd%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clxsp6vm200052869tkmmlrj0%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B40%252C60%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clxsp6vm2000228696ojapkvm%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clxsp6vm1000128696ofucqww%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Findex.html%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522clxt1tqmm000228693683crp6%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A37%252C%2522startColumn%2522%253A23%252C%2522endLineNumber%2522%253A37%252C%2522endColumn%2522%253A23%257D%255D%252C%2522filepath%2522%253A%2522%252Fstyles.css%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522clxsp6vm2000228696ojapkvm%2522%252C%2522activeTabId%2522%253A%2522clxt1tqmm000228693683crp6%2522%257D%252C%2522clxsp6vm200052869tkmmlrj0%2522%253A%257B%2522id%2522%253A%2522clxsp6vm200052869tkmmlrj0%2522%252C%2522activeTabId%2522%253A%2522clxsp8zvm004a2869147v1jcv%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522id%2522%253A%2522clxsp8zvm004a2869147v1jcv%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522path%2522%253A%2522%252F%2522%257D%255D%257D%252C%2522clxsp6vm200032869mc9tkczd%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522clxsp6vm200032869mc9tkczd%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Afalse%252C%2522sidebarPanelSize%2522%253A0%257D)

## CSS Relative Position

The `position: relative;` property positions the element relative to its original position. The `top, right, bottom, left` properties is used to move the element accordingly.

Here, we give `position: relative;` to box one and make it `top: 35px` and `right: 5px;`. So, the box one moves to the top and right to its original position.

```

Note: The space is still preserved in the original position of the element.

```

<!-- Eg of relative -->

![Position relative](https://github.com/J11tendra/NerdNarratives/blob/main/learn-css-positions/assets/position-relative-3.png?raw=true)

## CSS Absolute Position

The `position: absolute;` property removes the element completely from the normal flow of the document.

It is positioned _relative_ to the nearest parent element having a position other than `static`.

If there is no parent with position other than `static`, then it is positioned relative to the document itself.

Below both the boxes has `top: 50px; and right: 50px;` only the difference is first eg is relative to the document(webpage) and second eg is relative to the border container.

Here, the box one is no longer the part of border container.

<!-- Eg of absolute -->

![Position absolute](https://github.com/J11tendra/NerdNarratives/blob/main/learn-css-positions/assets/position-absolute-4.png?raw=true)

```

Note: An absolutely positioned element loses original space in the document flow.

```

## CSS Fixed Position

The `position: fixed;` property positions an element to remain fixed in the same position, even when the page is scrolled. It is similar to the absolute value, but it remains relative to the viewport at all times.

Here, the box one is positioned `50px from top and right` it will remain at the same position even when the page is scrolled.

<!-- Eg of fixed -->

![Position fixed](https://github.com/J11tendra/NerdNarratives/blob/main/learn-css-positions/assets/positions-fixed-5.gif?raw=true)

## CSS Sticky Position

The `position: fixed;` positions the element in the combination of `fixed` and `relative` values.

This property allows the element to stick to specific position in the viewport as you scroll, but only within its containing element.

When you first scroll, the element behaves like it has relative positioning. It moves with the flow of the document.

Once the element reaches the specified position (defined by top, right, bottom, or left), it "sticks" to that position. It will stay in that position as you continue to scroll.

The element will stop sticking and resume normal document flow once the containing element (the nearest scrollable ancestor) is out of view.

<!-- Eg of sticky -->

![Position sticky](https://github.com/J11tendra/NerdNarratives/blob/main/learn-css-positions/assets/positions-sticky-6.gif?raw=true)

## Conclusion

Thank you for reading!! If you find this helpful; drop your reactions and share this piece with others. Let me know into the comments, "Why you suck at CSS?"

You can also stay connected with me by following me here and on [X](https://twitter.com/JiitendraC), [GitHub](https://github.com/J11tendra/), and [LinkedIn](https://www.linkedin.com/in/jiitendrachoudhary/).