Understanding CSS Positioning

Hello there, Welcome again to my blog. 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 four;

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

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.

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

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

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 😍

Understanding CSS Positioning

Comments (1)

More from this blog

20 Best YouTube Channels for Learning JavaScript (For Newbies and Beyond)

The Beginner's Guide to Contributing to Open Source

Most Popular No-code tools for Building Websites

Productivity Hacks for Developers

Technical Writing for Beginners – An A-Z Guide to Tech Blogging Basics

What are positions in CSS?

Syntax

Types

Static:

Relative:

Absolute:

Fixed

Conclusion

Command Palette

Comments (1)

More from this blog

What are positions in CSS?

Syntax

Types

Static:

Relative:

Absolute:

Fixed

Conclusion