CSS Layout is the way which provides you to position an element. Here, Following are the CSS positioning method used for an element. These are as follows :-
- Static
- Relative
- Fixed
- Absolute
Using these above positioning methods, An element is then positioned using the top, bottom, left, and right properties.
Static Position :- This is the default positioned property of an element. There is no need of position properties using top, bottom, left and right as element with Static position is positioned according to the normal flow of the page.
<!DOCTYPE html>
<html>
<head>
<style>
div.static {
position: static;
border: 2px solid rgb(2, 49, 128);
}
</style>
</head>
<body>
<h2>position: static;</h2>
<p>An element with position: static</p>
<div class="static">
This div element has position: static;
</div>
</body>
</html>
Relative Position :- An element is positioned relative to its normal position. In this an element can be set top, right, bottom, and left. This position doesn't allow other content to adjust any gap left by the element.
<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
position: relative;
left: 30px;
border: 2px solid rgb(2, 49, 128);
}
</style>
</head>
<body>
<h2>position: relative;</h2>
<p>An element with position: relative</p>
<div class="relative">
This div element has position: relative;
</div>
</body>
</html>
Fixed Position :- In Fixed Position an element always stays in the same place even if the page is scrolled because it is positioned relative to the viewport. Means that the page is locked over an element will always remain in similar place. The top, right, base and left properties are utilized to position the element.
<!DOCTYPE html>
<html>
<head>
<style>
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: border: 2px solid rgb(2, 49, 128);
}
</style>
</head>
<body>
<h2>position: fixed;</h2>
<p>An element with position: fixed</p>
<div class="fixed">
This div element has position: fixed;
</div>
</body>
</html>
Absolute Position :- An element is positioned with respect to the closest positioned element instead of the position in respect to the viewport, as fixed.
<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
position: relative;
width: 400px;
height: 200px;
border: border: 2px solid rgb(2, 49, 128);
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border:border: 2px solid rgb(2, 49, 128);
}
</style>
</head>
<body>
<h2>position: absolute;</h2>
<p>An element with position: absolute</p>
<div class="relative">This div element has position: relative;
<div class="absolute">This div element has position: absolute;</div>
</div>
</body>
</html>
0 Comment(s)