CSS position Property – How to Define an Element's Position
position defines how you want browsers to place the selected HTML element.
The position
property accepts the following values:
static
relative
absolute
fixed
sticky
Let's discuss the five values below.
What Is position: static
in CSS?
static
is position
's default value. It positions the selected element following the normal layout flow.
The top
, bottom
, left
, right
, and z-index
CSS properties do not affect static elements.
Here's an example:
- CSS
- HTML
section {
background-color: orange;
margin: 50px;
}
div {
border: 1px solid black;
background-color: purple;
color: white;
padding: 20px;
border-radius: 5px;
}
.item3 {
background-color: DarkGreen;
position: static;
}
<section>
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
</section>
The static
value in the snippet above tells browsers to position item3
statically according to the document's normal layout flow.
What Is position: relative
in CSS?
relative
positions the selected element relative to its regular position in the document's normal layout flow.
In other words, suppose you have placed an element according to the page's normal flow. The position: relative
declaration along with the CSS top
, right
, bottom
, and left
properties allow you to offset the element relative to its initial position.
Here's an example:
- CSS
- HTML
section {
background-color: orange;
margin: 50px;
}
div {
border: 1px solid black;
background-color: purple;
color: white;
padding: 20px;
border-radius: 5px;
}
.item3 {
background-color: DarkGreen;
position: relative;
top: 25px;
left: 40px;
}
<section>
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
</section>
We used the position
property to offset item3
relative to its initial location in the document's normal layout flow.
In other words, we offset item3
25px
away from its normal top
position and 40px
from its initial left
location.
- A
position: relative
declaration disregards other items on the page. Therefore, you can use it alongside a non-auto
z-index
to create a new stacking context. - Relative positioning does not remove an element from the normal layout flow. Therefore, other elements around it will behave as if the relatively positioned element is in its default position.
What Is position: absolute
in CSS?
absolute
does the following:
- It removes the selected element from the document's normal layout flow.
- It positions the removed element absolutely to the specified edge of its container (or the HTML document).
We use the CSS top
, right
, bottom
, and left
properties to specify the precise location of the absolutely positioned element.
Here's an example:
- CSS
- HTML
section {
background-color: orange;
margin: 50px;
}
div {
border: 1px solid black;
background-color: purple;
color: white;
padding: 20px;
border-radius: 5px;
}
.item3 {
background-color: DarkGreen;
position: absolute;
top: 25px;
left: 40px;
}
<section>
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
</section>
We used the position
property to offset item3
absolutely 25px
away from the HTML document's top edge and 40px
from its left side.
Suppose an absolutely positioned element's parent has a static position
property. In that case, browsers will offset the absolute item from the HTML document's edges.
Browsers will automatically use the position: static
declaration for elements without a position
property.
For instance, the snippet above offsets item3
from the HTML document's edges because its container's (the <section>
element) position
property is static
.
If you prefer to offset item3
from its container's edges, specify a non-static position
property for the <section>
element.
Here's an example:
- CSS
- HTML
section {
background-color: orange;
margin: 50px;
position: relative;
}
div {
border: 1px solid black;
background-color: purple;
color: white;
padding: 20px;
border-radius: 5px;
}
.item3 {
background-color: DarkGreen;
position: absolute;
top: 25px;
left: 40px;
}
<section>
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
</section>
We used the position
property to offset item3
absolutely 25px
away from the <section>
's top edge and 40px
from its left side.
- Use the CSS
z-index
property to specify your overlapping elements' stacking order. - The
z-index
property only affects non-statically positioned elements. - Non-static elements are elements whose
position
property's value is notstatic
.
What Is position: fixed
in CSS?
fixed
does the following:
- It removes the selected element from the document's normal layout flow.
- It fixes the removed element to the specified region of the viewport.
In other words, browsers will fix a fixed
positioned element to the specified area of the viewport. Therefore, the item will remain in the same place even when users scroll the page.
We use the CSS top
, right
, bottom
, and left
properties to specify the precise location of the fixed positioned element.
Here's an example:
- CSS
- HTML
section {
background-color: orange;
margin: 50px;
}
div {
border: 1px solid black;
background-color: purple;
color: white;
padding: 20px;
border-radius: 5px;
}
.item3 {
background-color: DarkGreen;
position: fixed;
bottom: 25px;
right: 40px;
}
<section>
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
</section>
<p>Scroll this page</p>
<p>Scroll this page</p>
<p>Scroll this page</p>
<p>Scroll this page</p>
<p>Scroll this page</p>
<p>Scroll this page</p>
<p>Scroll this page</p>
<p>Scroll this page</p>
<p>Scroll this page</p>
<p>Scroll this page</p>
<p>Scroll this page</p>
<p>Scroll this page</p>
<p>Scroll this page</p>
<p>Scroll this page</p>
<p>Scroll this page</p>
<p>Scroll this page</p>
<p>Scroll this page</p>
<p>Scroll this page</p>
<p>Scroll this page</p>
<p>Scroll this page</p>
<p>Scroll this page</p>
<p>Scroll this page</p>
<p>Scroll this page</p>
<p>Scroll this page</p>
We used the position
property to fix item3
to the viewport's bottom-right region.
What Is position: sticky
in CSS?
sticky
sticks the selected element to the viewport once it reaches the specified threshold.
Here's an example:
- CSS
- HTML
section {
background-color: orange;
margin: 50px;
}
div {
border: 1px solid black;
background-color: purple;
color: white;
padding: 20px;
border-radius: 5px;
}
.item3 {
background-color: DarkGreen;
position: sticky;
top: 25px;
}
<section>
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div>Scroll this page</div>
<div>Scroll this page</div>
<div>Scroll this page</div>
<div>Scroll this page</div>
<div>Scroll this page</div>
<div>Scroll this page</div>
<div>Scroll this page</div>
<div>Scroll this page</div>
<div>Scroll this page</div>
<div>Scroll this page</div>
<div>Scroll this page</div>
<div>Scroll this page</div>
<div>Scroll this page</div>
<div>Scroll this page</div>
<div>Scroll this page</div>
<div>Scroll this page</div>
<div>Scroll this page</div>
<div>Scroll this page</div>
<div>Scroll this page</div>
<div>Scroll this page</div>
<div>Scroll this page</div>
<div>Scroll this page</div>
<div>Scroll this page</div>
<div>Scroll this page</div>
</section>
We used the position
property to stick item3
to the viewport once users scroll it 25px
away from the page's top edge.
Note this:
An element's sticky behavior ends once you've scrolled to its container's bottom edge. For instance, consider this example:
- CSS
- HTML
section {
background-color: orange;
margin: 50px;
padding: 13px;
}
div {
border: 1px solid black;
background-color: purple;
color: white;
padding: 20px;
border-radius: 5px;
margin: 10px;
}
.sticky-item {
background-color: DarkGreen;
position: sticky;
top: 25px;
}
<section>
<div>1</div>
<div class="sticky-item">2</div>
<div>3</div>
<div>Scroll this page</div>
<div>Scroll this page</div>
<div>Scroll this page</div>
<div>Scroll this page</div>
</section>
<section>
<div>4</div>
<div class="sticky-item">5</div>
<div>6</div>
<div>Scroll this page</div>
<div>Scroll this page</div>
<div>Scroll this page</div>
<div>Scroll this page</div>
</section>
<section>
<div>7</div>
<div class="sticky-item">8</div>
<div>9</div>
<div>Scroll this page</div>
<div>Scroll this page</div>
<div>Scroll this page</div>
<div>Scroll this page</div>
</section>
<section>
<div>10</div>
<div class="sticky-item">11</div>
<div>12</div>
<div>Scroll this page</div>
<div>Scroll this page</div>
<div>Scroll this page</div>
<div>Scroll this page</div>
</section>
In the snippet above, each <section>
's sticky-item
stops sticking to the viewport once users scroll to the container's bottom edge.
- A sticky element is a hybrid of
relative
andfixed
position values. In other words, a sticky item acts relatively until users scroll to the specified threshold; then it gets fixed to the viewport. - Sticky positioning does not remove an element from the normal layout flow. Therefore, other elements around it will behave as if the sticky element is in its default position.
Overview
This article discussed what a CSS position
property is. We also discussed its values.