Blog

Positioning in CSS

Its very difficult for beginners to understand why, how, where & when we should use Position Property. We use POSITION when we are working on complex layouts. If you understand POSITION PROPERTY, It will be very useful for you to make so many complicated structures easily. Hope this article will help you.
Lets start learning:-

The position property specifies the type of positioning method used for an element. Position have 4 values Static, Absolute, Relative, Fixed, Initial & Inherit. In this article we will discuss first 4 values only.

 

POSITION:STATIC
The default positioning for all elements is position:static, which means the element is not positioned and occurs where it normally would in the document.

In this example You can see that to columns are there, first is normal, which means it is without position and second is With position static. You can see both divs are working same. It means by default element position is static.

Normally you wouldn’t specify this unless you needed to override a positioning that had been previously set.

 

POSITION:RELATIVE
If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document.
Let’s move div2 down 20 pixels, and to the left 40 pixels:

Notice the space where div2 normally would have been if we had not moved it: now it is an empty space. The next element (div3) did not move when we moved div2. That’s because div2 still occupies that original space in the document, even though we have moved it.
It appears that position:relative is not very useful, but it will perform an important task later in this tutorial.

 

POSITION:ABSOLUTE
Position Absolute is the trickiest value.When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go.

Let’s move div2 to the top right of the page:

This is the working of position absolute. You can easily move anything on the page anywhere or where ever you want, without disturbing other elements.

 

 

POSITION:RELATIVE + POSITION:ABSOLUTE
If we set relative positioning on div2, any elements within div2 will be positioned relative to div2. Then if we set absolute positioning on “new div”(green), we can move it to the top right of div2:

 

 

POSITION:FIXED
This type of positioning is fairly rare but certainly has its uses. A fixed position element is positioned relative to the viewport, or the browser window itself. The viewport doesn’t change when the window is scrolled, so a fixed positioned element will stay right where it is when the page is scrolled.
Check the given below example:-

 

 

Conclusion:

Positions are little bit tricky but its very useful to create complex layouts. I think now you are clear with all the positions.

 

DevDiz

Ajay is a full time UI/UX designer and frontend developer for MNC

Leave a Reply

it's easy to post a comment