CSS Positioning Tutorial
Tags: css, writing, tutorial, beginners
Published: 2022-07-25 23:51:00

In CSS, we set the location of an element by using the `position` property.

For example:
```css
.element {
  position: relative;
  top: 10px;
}
```
Our elements’ position will be moved down 10px from the top, relative to its original position in the document.

The `position` property can have one of 5 values:

- `static`
- `relative`
- `absolute`
- `fixed`
- `sticky`

Let’s take a look at each!

## Values

### Static
Every element has a `static` position by default. Static positioned elements are displayed in the normal page flow.

Let’s use the following HTML as an example:
```html
<div class="parent">
  <p>parent</p>
  <div class="child">
     <p>child</p>
     <div class="element">
       <p>element</p>
     </div>
  </div>
</div>
```
And some basic CSS:
```css
* {
  font-family: monospace;
  text-align: center;
  font-size: 24px;
}
.parent {
  background-color: red;
  padding: 40px;
  width: 500px;
  border: 2px solid #000;
}
.child {
  background-color: blue;
  padding: 30px;  
  border: 2px solid #000;
}
.element {
  background-color: green;
  padding: 30px;
  border: 2px solid #000;
}
```
This gives us the following:
![Basic CSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/opd0ernz01dojhsitv5y.png)
We have our default `static` layout. The `static` position doesn’t need to be set as its assumed.

If we attempted to apply properties such `top`, `bottom`, `left` or `right` to a static element, there would be no effect.

### Relative

An element with a `relative` position will also remain in the document flow, only now `top`, `bottom`, `left` & `right` will work!

These properties (known as “offset” properties) move element from the original position in the specified direction.

They accept any length value or a percentage.

Let’s add `position: relative` & `left` with an offset value of 100px to our element:
```css
.element {
  /* other styles ... */
  position: relative;
  left: 100px;
}
```
![Position CSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jzi6lyx5mzhxg1d40qwz.png)
Our element will move 100px from the left, relative to its container.

We could also set multiple values:
```css
.element {
  /* other styles ... */
  position: relative;
  top: -200px;
  left: 100px;
}
```
![Position CSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pltp38oisbq2y3zyk46x.png)
The negative value for `top` moves box move up relative to its container.

You’ll also notice the space previously occupied by the `element` box still remains. As its position is offset relative to its original position.

We can also apply z-index to relatively positioned elements!

### Absolute

When the `absolute` position is set on an element, it's completely removed from the document flow. Meaning all other page elements will behave as if it no longer exists.

Let's give our element a `position: absolute`, we can see that its original space has now collapsed, as the element exists outside of the document flow.
```css
.element {
  /* other styles ... */
  position: absolute;
}
```
![Position CSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fb65un44aghpjzocyihq.png)
We can use positional properties with an `absolute` element. So we can move it around using `top`, `right`, `bottom`, or `left`:
```css
.element {
  /* other styles ... */
  position: absolute;
  top: 0px;
  left: 0px;
}
```
![Position CSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5s4vi9g8o56g3pab8838.png)
It’ll position itself at the 0,0 coordinates of the browser window (the top-left corner).

Or:
```css
.element {
  /* other styles ... */
  position: absolute;
  top: 250px;
  left: 100px;
}
```
![Position CSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tkmq67rwjqgddbdl13sr.png)
Our offset properties always set the position relative to the closest container that is **not** `static`.

If all parent containers are static, it’ll sit relative to the window.

But if we add `position: relative` to the `.child` element, and set the `top` and `left` to 0, the element will be positioned at the 0, 0 coordinates of `.child`:
```css
.child {
  /* other styles ... */
  position: relative;
}
.element {
  /* other styles ... */
  position: absolute;
  top: 0px;
  left: 0px;
}
```
![Position CSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/htmostfnj8whx6smuvtn.png)
This is a great trick to remember when positioning elements on a page!

You can also use `z-index` placement with absolute positioning.

### Fixed
An element with a `fixed` value is similar to absolute in that it’s also removed from the flow of the document.

A fixed positioned element is **always** relative to the _window itself_, **not** any particular parent container:
```css
.element {
  /* other styles ... */
  position: fixed;
  top: 0;
  left: 0;
}
```
![Position CSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dvwkjskzorpp47jz9vus.png)
Also, `fixed` elements are not affected by scrolling. Meaning its position will stay the same even when the page is scrolled.

For example, you might use the `fixed` element to place a “scroll to top” icon at the bottom-right side of the page!

### Sticky

The `sticky` value is a hybrid of the `relative` and `fixed` values. It’s treated like a `relative` value until the scroll location (of the viewport) hits a specified threshold. At that point it “sticks” in place, acting like a `fixed` element.

You might want a landing image with a navigation menu located underneath. As you scroll down past the landing image, you could have the menu then “stick” to the top of the window.

For example:
```css
.element {
  position: sticky; 
  top: 0;
}
```
Our element will be relatively positioned until the scroll location of the viewport reaches it. Then it’ll stick to the page in a `fixed` position at the top (`0`) of the screen.

At this stage, `sticky` remains an experimental value, with only partial adoption by the major browsers. 

## Conclusion
If you liked this blog post, follow me on [Twitter](https://twitter.com/RembertDesigns) where I post daily about Tech related things!
![Buy Me A Coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ijinng8k7bf23v0o6gkj.png) If you enjoyed this article & would like to leave a tip — click [here](https://www.buymeacoffee.com/rembertdesigns)

### 🌎 Let's Connect

- [Portfolio](https://www.rembertdesigns.co/)

- [Twitter](https://twitter.com/RembertDesigns)

- [LinkedIn](https://www.linkedin.com/in/rrembert/)

- [Hashnode](https://rembertdesigns.hashnode.dev/)

- [Devto](https://dev.to/rembertdesigns)

- [Medium](https://medium.com/@rembertdesigns)

- [Github](https://github.com/rembertdesigns)

- [Codepen](https://codepen.io/rembertdesigns)