5 position in CSS :
1. Static - does not get affected by left, right, top, bottom,etc. Take full width of the page.
2. Relative - moves left , right ,top, bottom ,etc. Take full width of the page.
3. Fixed - DOes not move with page scroll. Does not take full width.
4. Absolute - Moves with page scroll. Generally written inside parent div. If not written, take the complete window. Does not take full width.
5. Sticky : An element with position: sticky; is positioned based on the user's scroll position.A sticky element toggles between relative and fixed, depending on the scroll position.
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" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<h1>hello</h1>
<div class="static">
<span> I am postioned static.Dont get affected by top bottom etc... take full width</span>
</div>
<div class="relative">
<span>
I am postioned relative. chnages poston with top , bottom ,etc.take full width</span
>
</div>
<div class="fixed">This div element has position: fixed; does not move along with page scroll</div>
<div class="relative1">
<div class="absolute">This div element has position: absolute; moves along with page scroll</div>
</div>
<script></script>
</body>
</html>
css :
* {
margin: 0px;
}
.static {
position: static;
border: 2px solid black;
right: 20px;
}
.relative {
position: relative;
border: 2px solid tomato;
top: 20px;
left: 20px;
}
.fixed {
position: fixed;
border: 3px solid green;
background-color: greenyellow;
width: 300px;
bottom: 0;
right: 0;
}
.relative1 {
width: 300px;
height: 200px;
position: relative;
border: 4px solid black;
}
.absolute {
position: absolute;
border: 3px solid peru;
top: 100px;
left: 100px;
right: 100px;
}
0 Comments