Understanding the different pairings of CSS Position flavours
Tags: css, webdev, beginners
Published: 2018-08-27 07:57:37

---
title: Understanding the different pairings of CSS Position flavours
published: true
description: An attempt to finally understand what does `position` control in CSS and how its different values interact with each other.
tags: css, web development, beginners
cover_image: https://images.unsplash.com/photo-1524593481568-2e46b9ffcd16?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6e57af87b088aa8e3ec97f8ba933fbb3&auto=format&fit=crop&w=2850&q=80
---

_This story was [originally published](https://medium.freecodecamp.org/an-intro-to-the-mysterious-pairings-of-css-position-flavors-92b3625176ea) on freeCodeCamp.
Cover photo by [Tom Hermans](https://unsplash.com/photos/O6nOEZcLCWQ?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)_

The position property can be a mysterious thing to run into when you’re starting to learn about CSS. It’s like being given a set of unknown spices that look similar, but have very different flavours and the combinations between them don't always work like expected.

This article is an attempt to describe the best and most common pairings between them so that you can easily apply them in your first web cooking steps. Just like we learn in the kitchen — parsley goes well with garlic, but not that much with cinnamon.

### Getting to know the properties

First of all, let’s define what each of the position variants tastes like:

#### Static
This is what every HTML element has by default. It means the element will be positioned according to the normal document flow. Block elements with full width, inline elements lining up. It’s basically the salt of them all.

#### Relative
Elements with relative position can be placed relatively to the space they would occupy in the normal document flow. They still occupy that space **only**, but support `top`, `right`, `bottom` and `left` properties. 
Whatever values you assign to those properties will be used to calculate its displayed position using its real position boundaries. Like adding some pepper, it usually doesn’t do much harm.

#### Absolute 
This one’s tricky — it’s sort of like cumin, it can be a very good addition, but you have to use it carefully. Absolute elements are removed from the normal document flow. This means they don’t affect and aren’t affected by other elements in the page. However, they will be placed **relatively** (yes, I know, bear with me) to their nearest positioned ancestor. This means whichever parent element that has its position **explicitly set**. It can be fine tuned using `top`, `right`, `bottom` and `left` too. So it’s similar to relative positioning, but, since it’s no longer part of the document flow, it uses a parent as the reference.

#### Fixed
Ah, this one’s easy. Fixed elements are not part of the document flow at all and their position is based on the whole window, sometimes referred to as viewport. Also, they’re not affected by scrolling.

---
#### Quick tip before we start cookin'

It's not advisable to use `margin` and/or `padding` when you're using `top`, `right`, `bottom` and `left`. While the latter will _offset_ the element's visible position the first will offset its **real and document-affecting** position. 

Things can get confusing if you're using both on the same element so best keep 'em separated.

---
### So, how can we mix them?

Use `position: relative;` whenever you want to offset an element _a little bit_ from where it would normally be, but you don't want everything else to move with it. Remember that all other elements will behave as if it hasn’t moved. Use `top`, `right`, `bottom` and `left` to adjust it _relatively_ to what would have been its natural position.

{% codepen https://codepen.io/anabellaspinelli/pen/djeqZP %}

Use `position: absolute;` when you care about where the element is in relation to its first parent or wrapper with an explicit (usually relative) position. Note for this that the position property **does not cascade**, so that's why this will use the nearest parent with an explicit position declaration, if there's none, then it will be the `<body>`. If you want to force cascading of the position property, you can declare it as `position: inherit;`.

Keep in mind that this element’s position is defined by the size and shape of its closest positioned parent, so if you change that, this element might be affected too.

{% codepen https://codepen.io/anabellaspinelli/pen/ajGaPo %}

Finally, `position: fixed;` is a funny thing to play around with. Normal usages include sticky navbars, footers, or side menus. Remember it’s out of the normal document flow, so this means:

- you can place it wherever you want and nothing else will break
- it also means that it won’t do anything else you don’t explicitly tell it to do, so you need to set its 2 coordinates for it to show up at all. 

These 2 coordinates (namely, top or bottom, plus left or right) will be measured from the edge of the window.

_(tip: scroll this up and down 👇)_
{% codepen https://codepen.io/anabellaspinelli/pen/PBeyoO %}

#### Sticky Disclaimer

There is another option I didn’t cover and that is `position: sticky;`. It makes elements behave and scroll normally but then stick to a certain position while the rest of the content keeps on scrolling. I decided to leave it out, because it’s still experimental and exceeds the understand-the-basics scope of this article. But, if you’re curious, [here’s an article](https://alligator.io/css/position-sticky/) showing what it’s all about.

---

_I plan to address many of these basic things that I never fully understood about web development by researching them and then putting my new knowledge to the test by writing articles about it. So expect more in depth takes on basic stuff from me in the future!_