CSS Position
In the CSS put the element to at specific position use the position element. it used to set an object in a particular position. in that helps us to four properties 'top' , 'bottom' , 'left' , 'right'.
There are four position in the CSS:
- static 2.relative 3.abolute 4.fixed
1.static
In every CSS element's static is default position.
top, right, bottom, left haven't effect on static position.
<!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>relative position</title>
<style>
.box{
width: 100px;
height: 100px;
border: 2px solid black;
}
#box1{
position: static;
top: 15px;
left:20px;
background-color: green;
z-index: -35;
}
#box2{
background-color: red;
/* z-index will work only for position: relative, absolute, fixed ; */
z-index: -165;
/* visibility: hidden; will hide the element but will show the element */
/* display: none; will hide the element and space*/
}
#box3{background-color: brown;}
#box4{background-color: blueviolet;}
</style>
</head>
<body>
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
<div class="box" id="box4"></div>
</body>
</html>
2.relative
The position is affected by the properties top, bottom, left, right which given by you. related to that properties it will be change.
for example you give the top value 100px and left value 80px of the one element it will be move from top 100px and then 80px from left.
<!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>relative position</title>
<style>
.box{
width: 100px;
height: 100px;
border: 2px solid black;
}
#box1{
position: relative;
top: 39px;
background-color: green;
z-index: -35;
}
#box2{
position: relative;
top :34px;
background-color: red;
/* z-index will work only for position: relative, absolute, fixed or static; */
z-index: -165;
/* visibility: hidden,will hide the element but will show the element */
/* display: none; will hide the element and space*
}
#box3{background-color: brown;}
#box4{background-color: blueviolet;}
</style>
</head>
<body>
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
<div class="box" id="box4"></div>
</body>
</html>
3.absolute
the value declares that element is removed from the normal document flow ,and no space is created for the element in the page.
if you give the any properties to the child element then its follow.
- for example you give the 15px from top then the child element is moved 15px from their parent element. if you don't give to them any properties then its overlapped.
<!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>relative position</title>
<style>
.box{
width: 100px;
height: 100px;
border: 2px solid black;
}
#box1{
position: absolute;
top: 15px;
left:20px;
background-color: green;
z-index: -35;
}
#box2{
background-color: red;
/* z-index will work only for position: relative, absolute, fixed ; */
z-index: -165;
/* visibility: hidden, will hide the element but will show the element */
/* display: none; will hide the element and space*/
}
#box3{background-color: brown;}
#box4{background-color: blueviolet;}
</style>
</head>
<body>
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
<div class="box" id="box4"></div>
</body>
</html>
4.fixed
fixed value also declares the element is removed from normal document flow and no space is created for the element in the page layout.
position fixed element relative to the viewport, it means it remains same position or place even if the page is scrolled.
you give the any properties to it, it can fixed the element in the particular position.
there is no space for any particular element and also scrolling will not change the position of the that element.
<!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>relative position</title>
<style>
.box{
width: 100px;
height: 100px;
border: 2px solid black;
}
#box1{
position: fixed;
top: 15px;
left:200px;
background-color: green;
z-index: -35;
}
#box2{
background-color: red;
/* z-index will work only for position: relative, absolute, fixed ; */
z-index: -165;
/* visibility: hidden; will hide the element but will show the element */
/* display: none; will hide the element and space*/
}
#box3{background-color: brown;}
#box4{background-color: blueviolet;}
</style>
</head>
<body>
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
<div class="box" id="box4"></div>
</body>
</html>
