---
title: "How to learn CSS Positions with examples"
date: "2020-12-22"
slug: "how-to-learn-css-positions-with-examples"
author: "Dany Paredes"
canonical: "https://danywalls.com/how-to-learn-css-positions-with-examples"
description: "If you are a front-end developer, knowing to position elements with css is critical knowledge. CSS has five position types. I will try to write a small example with each of them. Every CSS Position example use the following HTML structure <main> ..."
---

If you are a front-end developer, knowing to position elements with css is critical knowledge. CSS has five position types. I will try to write a small example with each of them.

Every CSS Position example use the following HTML structure
```html
<main>
	<div class="card card-1">
		card 1
	</div>
	<div class="card card-2">
		card-2
	</div>
	<div class="card card-3">
		card-3
	</div>
</main>
```

##static 

Static works on document flow by default for elements. Every element is related to the document flow.

[Link](https://jsfiddle.net/danywalls4/xdmynj0a/31/)


## relative
The element can be moved relative to his current position, using use top, left, and bottom., 

Example: Move the current card 50px from the left. It takes the present position as a reference.
[Link](https://jsfiddle.net/danywalls4/xdmynj0a/33/)


## absolute
The element jumps from the normal flow, but without breaking other elements' positions, you can move everywhere because it references the body as default.

Example, the main have a size like 250px and `.card-3` with absolute position is top 0 it will get out from parent.

[Link](https://jsfiddle.net/danywalls4/xdmynj0a/48/)

If want to move close to parent, set the position the use relative or absolute to parent.

[Link](https://jsfiddle.net/danywalls4/xdmynj0a/49/)

The .card-3 keep the position related to the parent, but the .card-3 is over .card-1 how to move card-1 to top ?

The z-index help us to move element over elements, just set a higher value and move it to the top.

[Link](https://jsfiddle.net/danywalls4/xdmynj0a/51/)

## fixed

The element with position fixed jump from normal flow but is relative to the viewport, 

Example: You want to have a message on top, or modal don't care if the use scroll page is a use case.

First increment body height to 150vh and set position fixed to main and top:100px from the top, don't care use scroll the main with position fixed it will stay.

[Link](https://jsfiddle.net/danywalls4/xdmynj0a/53/)
## sticky
The element with position sticky keeps the place relative to the user scroll position. 

Example: The card with position sticky inside the main will keep his position his container is visible.

[Link](https://jsfiddle.net/danywalls4/xdmynj0a/60/)

## Final
This is a quick overview of the position in CSS. I hope an example helps you understand a slight CSS position.

_Photo by [Mitchell Luo](https://unsplash.com/@mitchel3uo?utm_source=unsplashx&utm_medium=referral) on [Unsplash](https://unsplash.com/?utm_source=unsplashx&utm_medium=referral)_