CSS - Position Property
Tags: webdev, beginners, tutorial, css
Published: 2022-04-25 10:51:51

Hello everyone, today, I want to share with you a CSS property called `position`, I remember when I started out I had no clue what it does but, I believe, now I have a good understanding of it so I thought I will tell you about it.

POV: You started learning CSS and want to arrange some items with properties `left`, `right`, `top`, `bottom` but nothing is moving... what's going on?

## Table of contents (Jump to...)
1. [Examples](#examples)
2. [Playground](#playground)

## Position property

The `position` property give you the power to "position"/place the elements around the document or the container, without this `position` property, other properties like `left`, `right`, `top`, `bottom` and `z-index` won't do anything. This is because the default `position: static` property place the element according to the normal flow of the document. 

These are the possible values for the `position` property: 
- static (default) - Elements are placed base on the flow of the document. Left, right, top, bottom has no effect.
- relative - When an element is position relative it remains in the flow of the document, you will be able position the element horizontally and vertically relative to it's normal position. 
- fixed - This element will be taken out of the normal flow, and will be placed relative to the document and will not be affected by scrolling.
- absolute - This element will also be taken out of the normal flow, similar to fixed but it is affected by scroll, and you can have it be relative to the parent, unlike fixed which is relative to the document.
- sticky - This one behave like relative until you scroll to a certain point and it will behave like a fixed position element. 

<a name="examples"></a>
As usual, let's look at some examples. The first screenshot shows the set up, all elements have no `position` property and they appear as normal flow. 

![Set up](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f69qwbodjuaoix1kvpj2.png)
<br>
1. If you want to position an item say 300px more to right, you can use `position: relative` and `left: 300px`, this adds 300px to it's normal position.
![relative position](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/154fgzhruxrmrfgt9dw0.png)
2. Maybe you want to fix something at the top left, you can use `position: fixed` and `top` and `left` properties, here I used 10px to show you. *Note: scrolling doesn't affect the position of fixed elements.*
![fixed position](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wt38sk5bbg9qll71rw2l.png)
3. Maybe you want something to always be in the same spot inside a container but still be affected by scrolling. You can use `position: absolute` followed by some left, right, top or bottom properties. *Note: if you want the absolute positioned element to be relative to the parent, you have to include `position: relative` to the parent, otherwise it will be relative to the document*.
![absolute position](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ei203evrutov9fr91h0.png)
4. Lastly, if you want something to be position relative but remain on the screen when you scroll, then `position: sticky` is good. It's hard to show with screenshot but I will try.
![sticky position 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bfborq2425wiybfiiv1l.png)
![sticky position 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bz35m67aukqymkdfcglh.png)
 
### Playground <a name="playground"></a>

I have attached the Codepen where you can play around with the toggling positioning. If you want to mess around with it, you can open it up on Codepen and in the CSS tab, you can go into the class you want to mess around with and change the values of the left, right, top and bottom to whatever you like, then you can click on the element to see how it looks compared to its normal flow.

{% codepen https://codepen.io/Katakung95/pen/NWXVRXe %}

### Summary

So, now you know that if you want to position your elements using left, right, top, bottom and z-index. You should use the `position` property (anything but the default static value). Depending on what you want to achieve, you can use relative, fixed, absolute and sticky position.

If you prefer learning from a video, I recommend [WebDevSimplified](https://www.youtube.com/watch?v=jx5jmI0UlXU&ab_channel=WebDevSimplified) it is short and concise.

That is all for today, thank you for reading and as always, please leave a comment if you have any feedback or suggestions.
![smile anime character meliodas](https://mystickermania.com/cdn/stickers/anime/seven-deadly-sins-shy-meliodas-512x512.png)