DEV Community

loading...
Cover image for CSS Position Property Explained!

CSS Position Property Explained!

surajondev profile image Suraj Vishwakarma Originally published at surajondev.wordpress.com ・2 min read

Introduction

We struggle a lot while positioning elements at the right place on the webpage. Sometimes we also find that top/left/bottom/right has no effect on the element. The position property of CSS controls the positioning of elements on the webpage and its behavior. It also influences other elements of the webpage.

gif-4mb

Today, we are going to look into the position property and its different values in CSS.

Position Property

The position property specifies the type of positioning method used for an element.
-W3Schools

It defines the position of an element in the document.

There are 5 major key value of position property

  • Static
  • Absolute
  • Relative
  • Fixed
  • Sticky

Static

It is the default value of position property. The element is rendered in order of placement. It doesn't break the flow of the document. top/left/bottom/right attribute don't work with static position property.

02-Static-position-FROONT

Why to use: It will scale on all browser


Absolute

The element is removed from the normal flow of the document. Other elements will behave as it's not even there in the document. All the position property will work. Absolute positioned elements are relative to their parent element.

03-Absolute-position-FROONT

Why to use: Use when to position element according to parent element


Relative

The element is positioned relative to its normal position. It acts as a static element. Now, top/left/bottom/right attribute will work on the element. It is mostly used for the parent elements.

04-Relative-position-FROONT

Why to use: Use for parent element of an absolute positioned element


Fixed

The fixed position element is the same as the absolute position. They are removed from the normal flow of the document. But unlike absolute position elements, they are always relative to the HTML tag.

05-fixed-position-FROONT

Why to use: Use when you want the header to be fixed on the top of the viewport.


Sticky

The sticky position is unique. It behaves according to scroll. If you scroll past the element, it will stick to the position. After that, it will work as a fixed element.

CssPositionSticky

Click here for live action of sticky position property.

Why to use: When you want something to stick after a certain click like Buy Now, Login.


Last Note

I hope now you will able to position the element according to your need without much frustration. Thank you are reading the blog post.

GIF Credit : FROONT BLOG

🔗 Connect with me:

Twitter GitHub

Discussion (16)

pic
Editor guide
Collapse
indoor_keith profile image
Keith Charles • Edited

It's worth saying, absolute is not positioned based off the parent element. It's based on the first ancestral element with a position other than static. If there is no ancestral element with a non static position set, it will base its position on body

Collapse
afif profile image
Temani Afif

If there is no ancestral element with a non static position set, it will base its position on body --> it's not really the body but the initial containing block as defined here: w3.org/TR/CSS21/visudet.html#conta... it's upper than the body (and the html) element.

Example: jsfiddle.net/c9hbam0d/1/ (see how the element is at the bottom of the screen and not the bottom of the body or the html).

Collapse
indoor_keith profile image
Keith Charles

ah yup, so it can go all the way up to document if body or html isn't positioned as well. 👍

Collapse
afif profile image
Temani Afif

you mean what by It will scale on all browser ?
Also saying this Use when to position element according to parent element is not very accurate because we don't always need to position element according to its parent, it can be any ancestor based on the use case.
Similar to what you said for position:relative. Its purpose is not only to be used when dealing with a child having position:absolute. We use position:relative to be able to use z-index for example (among many other use cases)

Collapse
ravavyr profile image
Ravavyr

I have to say here that ANY time you use position:absolute, it should be done in relation to its parent which should be given relative position unless the parent itself is also absolute or fixed.
There is zero reason you ever need to put something absolute to anything other than its own parent and following this rule also saves you a thousand headaches in the future.

Another rule is that anything positioned absolute should also have a top/bottom and left/right placement defined to avoid crossbrowser issues [mostly safari these days and IE of course]

Collapse
afif profile image
Temani Afif • Edited

There is zero reason you ever need to put something absolute to anything other than its own parent --> sorry but I disagree with this and I can give you a ton of examples where we have to position the element in relation to another ancestor which is not the parent element. Here is a random example I just found: stackoverflow.com/a/63585953/8620333 .. If I have time I can give you no less than 20 different uses cases where we don't position the position:absolute element in relation to its parent.

Thread Thread
ravavyr profile image
Ravavyr

It's not "bad" or "wrong", but you could achieve the same by setting the same image as background to all 3 with a position and size, though I'll admit your solution in this case is simpler. I don't like that it applies the :before 3 times as a big background to the parent, but at the same time it's easier than figuring out the position and size values the other way. You still don't NEED to do it this way.

Show me the other 20 cases.

Thread Thread
afif profile image
Temani Afif

You still don't NEED to do it this way. --> give me your solution that can work responsively in all the cases :) (considering the fact that you can have any number of elements and the margin can be different and so on).

Ok I will give you 20 or more ;) stay tuned and I will message you with different examples when I get time.

Thread Thread
afif profile image
Temani Afif • Edited

@ravavyr

2) jsfiddle.net/we79jdpg/
3) jsfiddle.net/v9jd2cuz/
4) jsfiddle.net/w80zvxj3/
5) jsfiddle.net/k768weua/
5.1) jsfiddle.net/b8c2j7xz/

Here you go with another 4 uses cases so a total of 5 now in addition to first one I gave in my first comment (I am not couting them 6 since the 5.1 is similar to the 5 ;) ). Explanation inside the code. More will come soon.

Thread Thread
afif profile image
Thread Thread
afif profile image
Collapse
indoor_keith profile image
Keith Charles

Didn't realize someone already mentioned position absolute 😅

Collapse
aalphaindia profile image
Pawan Pawar

Nice one!

Collapse
surajondev profile image
Collapse
designeranna1 profile image
Designer Anna

Those animations helped a lot to easily understand those CSS properties.
Thanks for writing this article.

Collapse
mindninjax profile image
Rishabh Singh ⚡

Awesome guide 😄