Positioning in CSS

#css #codenewbie

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;

Static
Relative
Absolute
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

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.

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

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

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 😍

Top comments (5)

Berufius • Aug 12 '20

I'm happy to hear I'm not the only struggling with this. I'm a beginner currently going through CSS. I'm using flexbox but still i have great trouble getting positioning right. This blog helps, so thnx. I would love to hear your thoughts on the combination with flexbox btw.