DEV Community

loading...

Positioning in CSS

amarachukwu profile image Amarachi Emmanuela Azubuike Updated on ・3 min read

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

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 😍

Discussion

pic
Editor guide
Collapse
redlotusdesignz profile image
Diana Chin

This is a great article on referencing CSS positioning. I never understood it at first until recently when I started my web development bootcamp course. I've always seen position:relative to be a lot easier to manage since you can shift the elements individually without the elements affecting each other, compared to position:absolute where if you move a certain block, the whole page shifts.

Collapse
amarachukwu profile image
Amarachi Emmanuela Azubuike Author

I'm glad Diana. Absolutely, I didn't get it until recently too, when I started creating arts with CSS.

Collapse
berufius profile image
Berufius

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.

Collapse
kingleo10 profile image
Niroj Dahal

You mistyped 5 in place of 4 :) Anyway,great article.

Collapse
amarachukwu profile image
Amarachi Emmanuela Azubuike Author

Oh thanks. I actually pointed out that there are 5, but we'll be looking at 4 in this article

Collapse
nomishah profile image
nouman shah

great article ...