Position in css:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Position in css</title>
</head>
<style>
*{
padding: 0;
margin: 0;
}
.container{
border: 1px solid black;
/* isme agar tranform , perspective , filter aga hoga position ke alva to ye yaha se lagu hoga */
/* position: relative; */
height: 11100px;
}
.item{
padding: 23px;
/* background-color: antiquewhite; */
margin: 23px;
border: 1px solid black;
}
#item1{
background-color: aqua;
/* khud ki position se hilta nahi hai .... aur isko aap top left bottom de sakte hai */
/* position: relative; */
}
#item2{
background-color: red;
/* ye apne parents ke according behaviour karenga .... agar parents ke parents upper ke ssab div me check karte jaiyenga .... aur jaha par usko position milenga waha par lagu ho jayenga */
/* position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 200%; */
}
#item3{
background-color: blue;
position: fixed;
bottom: 0px;
}
#item4{
background-color: yellow;
position: sticky;
top: 0px;
left:0px;
}
</style>
<body>
<div class="container">
<div class="item" id="item1"></div>
<div class="item" id="item2"></div>
<div class="item" id="item3"></div>
<div class="item" id="item4"></div>
</div>
</body>
</html>
Thanks you for commenting your questions. I will see question and respond you.