To make our web pages look good we have to position elements in our web pages in specific ways. To control the position of an element we use the position property in CSS. In this article, we are going to talk about different position properties in CSS.
Position property controls the location of an element in the document, and the final position is determined by the top left right left and z-index properties. position property takes five different values static relative absolute fixed sticky, we are going talk about them one by one.
position: static
This is the default position of every element in the document. If you set the top left right left and z-index properties, on an element with a position set as static there would be no changes in the position of the element. Let’s have a look at the example below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Positioning</title>
</head>
<style>
.box {
background-color: #242b2e;
height: 100px;
width: 100px;
font-size: 20px;
text-align: center;
color: #ffffff;
display: inline-block;
}
.box-1 {
top: 40px;
}
</style>
<body>
<div class="box box-1">1</div>
<div class="box box-2">2</div>
<div class="box box-3">3</div>
<div class="box box-4">4</div>
<div class="box box-5">5</div>
</body>
</html>
In the above code as you can I have 5 div elements, and I didn’t apply position property to the box class so by default all five boxes are positioned as static, so applying top:40px on box-1 would not show any changes.
position: relative
position: relative is similar to position: static, The element is positioned the same as the flow of the document, but we can change the position of the element by using the top left right left, and z-index properties. Let’s have a look at an example.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Positioning</title>
</head>
<style>
.box {
background-color: #242b2e;
height: 100px;
width: 100px;
font-size: 20px;
text-align: center;
color: #ffffff;
display: inline-block;
}
.box-1,
.box-3,
.box-5 {
position: relative;
top: 40px;
}
</style>
<body>
<div class="box box-1">1</div>
<div class="box box-2">2</div>
<div class="box box-3">3</div>
<div class="box box-4">4</div>
<div class="box box-5">5</div>
</body>
</html>
in the above example, I have applied position: relative and top:40px to the div element with class box-1, box-3, and box-5, and these three elements moved 40px downward from their original position.
position: absolute
Element with position: absolute is completely removed from the original document flow. With the help of top left right left, and z-index properties, we can position this element anywhere relative to its closest parent. When an absolute positioned element has no positioned parent element, it uses the document body, Let’s try to get this clear with an example.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Positioning</title>
</head>
<style>
.box {
background-color: #242b2e;
height: 100px;
width: 100px;
font-size: 20px;
text-align: center;
color: #ffffff;
display: inline-block;
}
.box-3 {
position: absolute;
bottom: 10px;
right: 10px;
}
</style>
<body>
<div class="box box-1">1</div>
<div class="box box-2">2</div>
<div class="box box-3">3</div>
<div class="box box-4">4</div>
<div class="box box-5">5</div>
</body>
</html>
In the above example, I have applied an absolute position to the 3rd box
.box-3{position: absolute;bottom:10px;right:10px} and as you can see 3rd box has been removed from the original document flow and has been positioned according to the bottom:10px;right:10px properties. in our example, there is no parent element to the box elements so the box is positioned relative to the document body.
position: fixed
Element with position: fixed is completely removed from the document flow just like the position: absolute. When we apply position: fixed to the element is positioned relative to the document body not to the parent element. Element with fixed position is also not affected by the scrolling effect.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Positioning</title>
</head>
<style>
.box {
background-color: #242b2e;
height: 100px;
width: 100px;
font-size: 20px;
text-align: center;
color: #ffffff;
display: inline-block;
}
.box-3 {
position: fixed;
top: 200px;
}
</style>
<body>
<div class="box box-1">1</div>
<div class="box box-2">2</div>
<div class="box box-3">3</div>
<div class="box box-4">4</div>
<div class="box box-5">5</div>
<p>
very very long text content, so that we can have a scroll.
</p>
</body>
</html>
in the above example, I have given .box-3{position:sticky;top:0} to box3 and it’s position does not change on scroll.
position: sticky
Element with position: sticky is like position: relative it remains in the original document flow until the user scroll when the user scrolls the element with position sticky get fixed based on any of the top left right left, and z-index properties.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Positioning</title>
</head>
<style>
.box {
background-color: #242b2e;
height: 100px;
width: 100px;
font-size: 20px;
text-align: center;
color: #ffffff;
display: inline-block;
}
.box-3 {
position: sticky;
top: 0;
}
</style>
<body>
<div class="box box-1">1</div>
<div class="box box-2">2</div>
<div class="box box-3">3</div>
<div class="box box-4">4</div>
<div class="box box-5">5</div>
<p>
very very long text content, so that we can have a scroll.
</p>
</body>
</html>
In the above example, I have applied .box-3{position: sticky;top:0}, As you can see in the above example box3 sticks to the top when we scroll, you must have seen these types of the navbar on any website.
Conclusion
That’s it for this article, write your feedback in the comment section.
Top comments (0)