Photo by Jackson Sophat on Unsplash
CSS Positions Property
Lets's learn about the Position Property in CSS CSS Positions a easy👌
PermalinkIntroduction
The CSS position property defines the position of an element in a document. This property works with the left, right, top, bottom and z-index properties to determine the final position of an element on a page.
PermalinkThere are five values the position property can take.
- static
- relative
- absolute
- fixed
sticky
PermalinkLet's Understand each of them with an example.
Static
This is a by default position for HTML elements. It always positions an element according to the normal flow of the page. It is not affected by the top, bottom, left, and right properties.
Let's use an example to show that position: static has no effect on the position of an element. We have 4 pics placed in a parent container. We'll use this example throughout this article.
HTML
<!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>css|Postion</title>
<link rel="stylesheet" href="Css/style.css">
</head>
<body>
<div class="conatiner">
<h1>Lets Learn css</h1>
<img src="/image/A body.png" alt="" class="image img1">
<img src="/image/Abhi.png" alt="" class="image img2">
<img src="/image/Abhi2.png" alt="" class="image img3">
<img src="/image//Goa.png" alt="" class="image img4">
</div>
</html>
Let's add position: static to the first pic with the class image img1 and left, top values to it.
.image
{
height: 100px;
display: inline-block;
}
.conatiner
{
height: 500px;
width: 60%;
border:2px solid red;
margin: 0 auto;
text-align: center;
position: relative;
}
.img1
{
height: 200px;
position:static;
bottom: 10%;
left: 10%;
}
Relative The relative positioning property is used to set the element relative to its normal position. Let's replace position: static with position: relative in our example.
HTML
<!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>css|Postion</title>
<link rel="stylesheet" href="Css/style.css">
</head>
<body>
<div class="conatiner">
<h1>Lets Learn css</h1>
<img src="/image/A body.png" alt="" class="image img1">
<img src="/image/Abhi.png" alt="" class="image img2">
<img src="/image/Abhi2.png" alt="" class="image img3">
<img src="/image//Goa.png" alt="" class="image img4">
</div>
</html>
Let's add position: Relative to the first pic with the class image img1 and left, top values to it.
Let's add position: static to the first pic with the class *image img1* and left, top values to it.
Absolute
The elements are positioned relative to their parent elements with absolute positioning. The absolute elements are positioned relative to the closest ancestor with any position property other than static. If the closest ancestor has a static position, the element is positioned relative to the next parent element without the static position property.
HTML
<!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>css|Postion</title>
<link rel="stylesheet" href="Css/style.css">
</head>
<body>
<div class="conatiner">
<h1>Lets Learn css</h1>
<img src="/image/A body.png" alt="" class="image img1">
<img src="/image/Abhi.png" alt="" class="image img2">
<img src="/image/Abhi2.png" alt="" class="image img3">
<img src="/image//Goa.png" alt="" class="image img4">
</div>
</html>
Let's add position: Absolute to the first pic with the class image img1 and left, top values to it.
/* lets move first pic to botton :right */
.img1
{
position: absolute;
bottom: 0%;
left: 0%;
}
Fixed
An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.
HTML
<!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>css|Postion</title>
<link rel="stylesheet" href="Css/style.css">
</head>
<body>
<div class="conatiner">
<h1>Lets Learn css</h1>
<img src="/image/A body.png" alt="" class="image img1">
<img src="/image/Abhi.png" alt="" class="image img2">
<img src="/image/Abhi2.png" alt="" class="image img3">
<img src="/image//Goa.png" alt="" class="image img4">
</div>
</html>
Let's add position: Fixedto the first pic with the class image img1 and left, top values to it.
.img1
{
position: fixed;
bottom: 0%;
left: 0%;
}
Sticky
its is a bit difficult to understand the sticky but if relate it to real-life meaning you can easily understand it, think of sticky as a combination of relative and fixed, Remember in fixed element remain fixed at some position but in the sticky element will behave like relative to a certain point and after behaving like fixed.
HTML
<!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>css|Postion</title>
<link rel="stylesheet" href="Css/style.css">
</head>
<body>
<div class="conatiner">
<h1>Lets Learn css</h1>
<img src="/image/A body.png" alt="" class="image img1">
<img src="/image/Abhi.png" alt="" class="image img2">
<img src="/image/Abhi2.png" alt="" class="image img3">
<img src="/image//Goa.png" alt="" class="image img4">
</div>
</html>
Let's add position: Sticky to the first pic with the class image img1 and left, top values to it.
.img1
{
position: sticky;
top: 10%;
right : 0%;
}
Try out Sticky position by your own to get more idea upon it