Introduction

When it comes to building a webpage layout, understanding how to arrange items appropriately is crucial. With CSS, there are three alternative ways to align components on a page: display, float, and the position property.

Learn about the position property of CSS, its five possible values, and how to use offset properties to determine the final position of items in this article.

An element's position is set using the CSS position attribute. Therefore, without further talks, let's begin the celebration. Positioning comes in 5 different flavours:

• Static Positioning

• Relative Positioning

• Absolute Positioning

• Fixed Positioning

• Sticky Positioning

Static position

The default or "normal" positioning is the static position. As a result, the contents inside the backpack assume a default position if it is packed without being thoroughly organized.

If three elements are added to a web page with static positioning, the page's natural flow will be disrupted. Therefore, it won't matter if the top, right, bottom, left, or z-index properties are changed.

Let's fill your backpack with a few things and examine how it would appear in a static state.

You can see how the objects in the bag are arranged in the image above. This is due to the fact that the position value for each item has been set to static, which is the default setting. The natural flow is immediately followed by its arrangement. Now let's talk about relative positioning.

Relative Positioning

Your object is instructed to move in relation to its existing position via the relative placement. In order to relocate your water bottle adjacent to the lunch box, for instance, you must set the position as relative and provide the necessary values.

The space that the bottle once occupied next to the lunchbox remains empty when you relocate the bottle because the pencil case did not move there just because you did.

In relative positioning, the initial space of the particular piece won't be removed from the regular flow when you modify the position. The bottle has been moved next to the lunch box in the image below, but the empty spot in its original location is still there because it won't be blocked by the flow of traffic.

Now let's talk about Absolute positioning.

Absolute Positioning

This is a challenging situation to illustrate with our example, though. Let's imagine you wish to store your water bottle in the backpack's pocket. If so, a relative position—or any other location other than a static position—should already be allocated to this pocket. Consequently, we may position it precisely inside the pocket. And in relation to the pocket, this location is chosen.

The pocket will shift to the top right corner of the backpack if it has no other positions other than static assigned to it and if there are no other nearby items or locations designated with non-static positions. It will therefore assume a location in relation to the backpack, from which you can determine an absolute position.

It simply means that for the absolute position to function, the parent element must have a position attribute value other than static. The element will be positioned relative to the viewport if there is no element with a position property value.

When an element is given an absolute position, the area it was previously occupied is removed from the regular flow and is no longer there.

See the image below. Your water bottle is now firmly situated inside the pocket. The pencil case has also taken up residence where your bottle previously stood.

Now let's talk about Absolute positioning.

Fixed Positioning

If you choose fixed positioning, you can set your objects wherever you like, whether or not other objects are already there. So, for instance, if you moved your bottle to the right side, as seen in the image below, you can still place the other item there and choose whether you want it on top of or underneath it.

The natural flow is also disrupted when a piece is given a fixed place. Additionally, it is situated in relation to the viewport. As a result, the element stays in its original position as you scroll the page.

Sticky Positioning

Using this example to convey this stance is difficult as well. Again, in order to illustrate this, I'll scroll your backpack and use it as a flat surface.

As implied by the name, this technique entails sticking your object somewhere. As an illustration, if you place your bottle on top of your backpack, it will remain there even after you scroll up and down the backpacks.

Combining fixed and relative positions results in sticky position behaviour. It will simply maintain a fixed position inside the bag and not move. The second backpack, however, moves in relation to the first backpack when you scroll to it.

Have you ever noticed how, as it moves, it sticks to the top of the backpack?

Alright, I hope you are aware of the behaviour of the various position property values.

When working with placement, there is one more idea that you need to comprehend. Z-index is that. Let's investigate the topic further.

Z-Index

Did you notice what happened when we moved your water bottle to the right side, on top of the book, from its original fixed position? How did we get it onto the book's surface?

The Z-index attribute enters the picture here. We use Z-index to stack components that are touching each other.

Consider that you need to stack a large number of books. Giving each a number, you then stack them one at a time. The top of the pile has the highest number, while the bottom has the lowest number. You can stack the components similarly to how we stack these books by using the Z-index. The z-index property can be used by any element that has a position value other than the static position.

You can choose how and in what order the items should overlap one another thanks to the z-index. The viewer will see an element more closely if you specify a higher z-index value. It will therefore be visible on top of the other components.

We now know everything there is to know about CSS positioning. I sincerely hope that this has improved your understanding of these ideas. Don't forget to provide feedback; I'd love to know what you think.