The position property in CSS says, how an element should be placed or positioned on a webpage.
The position property in CSS determines how an HTML element should be placed on a webpage.
There are four properties in CSS that are used to determine the placement of the positioned element. They are left, right, top and bottom.
However, the above properties only work when the property is set with values.
The position property has five values :
Let us look at them in detail.
By default all the elements in HTML are positioned static. i.e. With the value static for the position property, the elements are displayed as is.
And the point to note is, the elements with static values are does not depend on the left, right, top and bottom properties.
Sounds Confusing?
Let us clear it with the below example.
<html>
<head>
<style>
p.static_position {
position: static;
top: 100px;
}
</style>
</head>
<body>
<p>
This is a normal paragraph.
</p>
<p class="static_position">
This is a paragraph with position static.
</p>
</body>
</html>
So, in the above example, we have defined a normal paragraph with no CSS properties.
<p> This is a normal paragraph. </p>
And we also have defined another paragraph with CSS properties, which has the value of position set to static.
<style>
p.static_position {
position: static;
top: 100px;
}
</style>Please note that we have specified the top property, just to specify that there is no influence of the top property when the value of position property is static.
Now, if you see the above output, both the paragraphs,
This is a normal paragraph.
And,
This is a paragraph with position static.
Looks exactly the same. That is because all the HTML elements are positioned static by default.
Although we haven't specified any CSS properties for the first paragraph, still it had taken the default value position: static.
The relative value for the position property places an element relative to its normal position.
Let us understand it with the below example.
<html>
<head>
<style>
p.relative_position {
position: relative;
left: 50px;
}
</style>
</head>
<body>
<p>
This is a normal paragraph.
</p>
<p class="relative_position">
This is a paragraph with position relative.
</p>
</body>
</html>
Same as the previous example, we have defined two paragraphs. The first one doesn't have any CSS properties and second one has two CSS properties defined.
<style>
p.relative_position {
position: relative;
left: 50px;
}
</style>Now, if you see the above output, the first paragraph is placed as is.
This is a normal paragraph.
And the second paragraph has shifted 50px from the left side.
This is a paragraph with position relative.
That is because position: relative; places an element relative to its normal position. The normal position is where the first paragraph is placed and the second paragraph has shifted 50px from the left side from the normal position.
The absolute value for the position property places an element relative to its ancestor.
Let us understand it with the below example.
<html>
<head>
<style>
p.absolute_position {
position: absolute;
top: 100px;
left: 50px;
}
p.relative_position {
position: relative;
}
</style>
</head>
<body>
<p>
This is a normal paragraph.
</p>
<p class="relative_position">
This paragraph is the parent paragraph.
<p class="absolute_position">
This is the child paragraph with position absolute.
</p>
</p>
</body>
</html>
So, in the above example, we have a parent paragraph with relative position and a child paragraph with absolute position.
<p class="relative_position"> This paragraph is the parent paragraph. <p class="absolute_position"> This is the child paragraph with position absolute. </p> </p>
Now, if you see the output, the child paragraph(i.e. With value absolute), is placed 100px down from the parent element and 50px left from the parent element.
p.absolute_position {
position: absolute;
top: 100px;
left: 50px;
}The fixed value for the position property keeps an HTML element fixed.
Let us understand it with the below example.
<html>
<head>
<style>
p.fixed_position {
position: fixed;
left: 50px;
border: solid red;
}
</style>
</head>
<body>
<p class="fixed_position">
This is a paragraph with position fixed.
</p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
</body>
</html>
So, if you look at the above output, the paragraph This is a paragraph with position fixed. with red border is fixed. Even if we scroll the page, it is fixed at it position.
It is because we have set the value of position property as fixed.
<style>
p.fixed_position {
position: fixed;
left: 50px;
border: solid red;
}
</style>The sticky value for the position property keeps an HTML element at a position based on user scroll.
Let us understand it with the below example.
<html>
<head>
<style>
p.sticky_position {
position: sticky;
top: 0;
left: 50px;
border: solid red;
}
</style>
</head>
<body>
<p> This is the a paragraph. </p>
<p class="sticky_position">
This is a paragraph with position sticky.
</p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
<p> This is the a paragraph. </p>
</body>
</html>
So, if you look at the above output, on scrolling the paragraph with value fixed for position property, moves and gets sticky at the top.
<style>
p.sticky_position {
position: sticky;
top: 0;
left: 50px;
border: solid red;
}
</style>It gets sticky at the top because we have mentioned the value of top property as 0. If we had mentioned the value of top property as 50px it would get sticky at a position of 50px from the top.