Positioning in CSS
Tags: css, codenewbie
Published: 2020-08-11 20:00:35

Hello there,
In this article, I'll be explaining CSS positioning and why we use them.

Here's a little twist. CSS positioning has been a difficult concept for me to grab, and that's why I'm writing about it while learning at the same time.

## What are positions in CSS?
When placing elements on a web page or document, it is important to specify how they are displayed in relation to each other or their parent elements. Positions help you to set this.

## Syntax
The syntax for CSS positioning is;
`position: position-property`

## Types
There are 5 main positions in CSS, but for this article, we'll be looking at these 4;
1. Static 
2. Relative
3. Absolute
4. Fixed

I'll be explaining them in the next few lines.

### Static:
Every element has the `static` position by default. We can say an element with position `static` is an unpositioned element because it flows in the normal rendering sequence of the web page or document. It is easy to think the `static` position is the same as the `relative` position. Uhhmm, that could be true except that static elements don't obey the `left`, `right`, `top` and `bottom` rules.

### Relative:
When a child element has the `position:relative` property, it takes up a position which is relative to its parent element.

In this example, we have a parent and a child element.

For the child element, we added this

```
.container-child{
position:relative;
}
```

This enables the child element to take up a position which considers the dimensions of the parent element.

In the pen below, we'll see the outcome of this

{% codepen https://codepen.io/amarachukwu/pen/oNxgQBR %}

*Try changing the position to absolute and notice what happens.*

*Also try changing the height of the child element to 50% and notice what happens as well.*


### Absolute:
If a child element is given the `position:absolute` property, it will behave like the parent element is not there, and will be positioned automatically to the starting point (top-left corner) of its parent element. If it doesn't have any parent elements, then the initial document `<html>` will be its parent.

Let's add a `position:absolute` property to a child element with class `container-child`

```
.container-child{
position:absolute;
}
```
In the code below, the child element will display in relation to the dimensions of the document `<html>`and not the dimension of its parent `container`.

Try adjusting other properties of the child element such as `margin-left`, `margin-right` and you'll discover that this element isn't adjusting in response to its parent's dimensions.

{% codepen https://codepen.io/amarachukwu/pen/LYNEmrW %}

For this child element to respond relatively to the position of its parent, we need to set the parent to this;
```
.container{
position:relative;
}
```

And we'll have the following

{% codepen https://codepen.io/amarachukwu/pen/wvGBQMW %}

### Fixed
Fixed positioning restricts an element to a specific position in the viewport, which stays in place during scroll.

Let's add another element to our project, and this time, we'll be giving it a position of `fixed`.

```
.container2{
position:fixed;
}
```

Let's see how it looks 

{% codepen https://codepen.io/amarachukwu/pen/dyMPQdy %}

So you can see how the element with a `fixed` position stayed glued to its position even when the page is scrolled.

*Try fixing up the child element with the class `container-child` to stay under the fixed element on scroll.*


## Conclusion
CSS position has always been a tricky topic for me, but overtime I'm beginning to get a hang of it through subsequent usage. So I'll advise you implement these positions often in order to find out for yourself, what they really do.

Yup! This is where we wrap it up. I'll subsequently edit this article when I implement the `position` property in other lights. 

If you enjoyed this article, do connect with me on  [twitter](https://twitter.com/msamarachukwu) 😍