CSS provides the position
property that specifies how an element should appear in the document. This property is helpful when you want to position elements in the DOM outside of normal flow.
What is this blog post about?
This blog post covers the position
property with the top
, right
, bottom
, left
, and z-index
properties that determine the final position of an element.
Since this property has a notorious tendency to be misunderstood, let's try to figure out this property together!
Check out the demos I explained in this post here
Prerequisites for the blog
This blog post assumes that you are familiar with the syntax and basics of HMTL and CSS.
What is the CSS position property?
- The
position
property specifies how an element is placed in the DOM. - Along with this, you can use
top
,right
,bottom
, andleft
properties that specify where the element is placed.
-
The
position
property can take five values:- static
- absolute
- relative
- fixed
- sticky
Before we jump in, let's understand in short what
top
,right
,bottom
,left
, andz-index
are.
- The
top
,right
,bottom
, andleft
, properties specify how far away from the top/ right/ bottom/ left and element should be positioned.- By default all these properties have value auto, and the element is placed in a Static Position.
- It accepts both negative and positive integer values and common units such as px, rem, em, % etc.
-
z-index
is used to specify the stack level, and layer elements.- The default value for
z-index
is 0, and will not work unless you apply position on the element (except static). - Elements with a larger
z-index
value overlaps elements with smallerz-index
value. - It accepts positive and negative integers without any unit.
- The default value for
1. Static
-
position: static;
is the default value of this property, and the elements appear in their normal flow in the document. - Properties:
top
,right
,bottom
,left
, andz-index
have no effect on an element positionedstatic
. - Check the example below. The blue colored
div
with classstatic
has a static position.
-
The code for the above example:
div.static { position: static; /* Need not specify as this is default */ }
Check out the codepen here:
2. Relative
- When
position: relative;
is applied to an element, it appears in the normal flow of the document. -
But unlike static position, it accepts accepts values for
top
,right
,bottom
,left
, andz-index
.- The element is then placed relative to itself depending on the values of
top
,right
,bottom
,left
, and stacked in layers depending on the value ofz-index
.
- The element is then placed relative to itself depending on the values of
In the example shown below, the blue colored
div
element with classrelative
has a relative position, with top and left offset values.
-
The code for the above example:
div.relative { position: relative; top: 5em; left: 25%; }
Check out the codepen here:
3. Absolute
- When
position: absolute;
is applied to an element, it is taken out of the the normal flow of the document. - It remains in it's original position unless
top
,right
,bottom
,left
values are specified. - The other elements ignore the element, and behave as if it is not present at all.
-
z-index
can also be specified to stack and layer elements.
In the example below, the blue colored
div
with classabsolute
is given a relative position, and no values oftop
,right
,bottom
, andleft
are specified.
-
See what happens when this blue box is given
z-index: -1;
- The parent of this
div.absolute
is the section with classsection
andbackground-color: lightskyblue;
hasz-index: 0;
. - Since `z-index
of
section.sectionis greater than that of
div.absolute, the
div` is stacked below it's parent.
- The parent of this
- Typically an element with
position: absolute;
is placed relative to it's closest positioned ancestor (other than static). -
If no such ancestor is found, it is simply placed relative to the document.
- Check out the example below, and notice how the element is placed relative to the document.
-
The code for the above example:
div.absolute-two { position: absolute; top: 0; bottom: 0; left: 2em; }
-
Check out what happens, if we give the parent (or an ancestor) of an element with absolute position:
position: relative;
.
- Check the red colored
div
with a classabsolute-three
, and it's lightskyblue colored parentsection
with classsection
. - Note how this time the absolute
div.absolute-three
is positioned relatively within the parent and not the document.
- Check the red colored
-
The code for the above example is:
section.section { position: relative; } div.absolute-three{ position: absolute; bottom: 0; right: 25%; height: 100px; }
Check out the final codepen here:
4. Fixed
- When
position: fixed;
is applied to an element, it is taken out of the the normal flow of the document similar to Absolute Position.- The main difference is that the
position: fixed;
element is not given space in the layout.
- The main difference is that the
- The fixed element is not affected by scrolling, and remains in the specified position depending on the
top
,right
,bottom
, andleft
values. - The positioned element is relative to the document except when it's ancestors have
transform
,perspective
, orfilter
property applied with a value other than none.- Then, the ancestor behaves as the relative parent.
Check out the example below. The text
div
with blue background has a classfixed
andposition: fixed
-
The code for the above example is:
div.fixed { position: fixed; top: 40vh; right: 25vw; left: 25vw; }
Check out the codepen here
5. Sticky
- When
position: sticky;
is applied to an element, it is positioned in the the normal flow of the document similar to Relative Position. - But as the element is scrolled within the positioned ancestor, it becomes fixed once the offset value specified in
top
,right
,bottom
, andleft
properties are crossed.
-
For e.g. look at the image below of a header.
- The header's parent is the document, and it's "sticky" within it. As you scroll and the header is 0 away from top, i.e.
top: 0;
, it becomes a fixed positioned element.
- The header's parent is the document, and it's "sticky" within it. As you scroll and the header is 0 away from top, i.e.
-
The code for the above example is:
header.hero { position: sticky; top: 0; }
- Let's deal with another scenario. But this time let's use an element that is positioned sticky within another positioned ancestor.
- In this scenario, the sticky positioned element (text with blue colored background) has a class of
sticky
. - It's parent is the
section
with classsection
, and has alightskyblue background
. - As you scroll down and
div.sticky
is5px
away from the top, it becomes a fixed element. Before that it remains as relatively positioned element. - But there is a catch here. As the parent
section.section
scrolls away from the layout, so does the div with sticky position of. It no longer remains fixed, and now becomes relative again.
- In this scenario, the sticky positioned element (text with blue colored background) has a class of
Hence the sticky (in particular fixed) behavior of an element remains only within it's closest positioned parent.
-
The code for the above example is:
section.section{ position: relative; } div.sticky { position: sticky; top: 5px; }
Check the entire codepen here:
CONCLUSION
Phew! That was a lot. Wasn't it?
I understand that sometimes CSS can be overwhelming but trust me, as you practice the concepts become clearer.
The position
property is very important, and comes in handy in various scenarios.
Check out the demos I explained in this post here
- The
relative
andabsolute
positions are often used, and mostly together when you have pseudo elements.- These positions are also often used to stack items.
- The combination of
absolute
position withinrelative
position is common, and is used to add styles such as shadows to elements.
- The
sticky
position can be used for headers and navbar as shown in the example for Sticky above.- It could also be used in cases when you want to keep an element fixed on the page as long as the positioned parent/ ancestor is visible on the viewport.
These are not the only available use cases of
position
property. I highly recommend you to practice and get your hands dirty to understand these concepts in depth.
Thank you so much for reading this post!
This was my final blog post on CSS. In the coming posts, I will focus on JavaScript and try to explain few vital concepts.
If you liked this post then please help me out giving it a heart, unicorn or a pin!
Do share it among your dev friends, and comment down what you feel!
Top comments (0)