The position property is used in positioning an element. i.e. the following are positioning elements −
static − The element box is laid out as a part of the normal document flow, following the preceding element and preceding following elements.
relative − The element's box is laid out as a part of the normal flow, and then offset by some distance.
absolute − The element's box is laid out in relation to its containing block, and is entirely removed from the normal flow of the document.
fixed − The element’s box is absolutely positioned, with all of the behaviors which are described for position: absolute.
Following is the code for positioning elements using CSS −
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
color: white;
text-align: center;
height: 100px;
width: 100px;
}
.static {
position: static;
background-color: greenyellow;
}
.relative {
position: relative;
left: 50px;
background-color: rgb(255, 47, 47);
}
.absolute {
position: absolute;
right: 50px;
top: 20px;
background-color: hotpink;
}
</style>
</head>
<body>
<h1>Position elements example</h1>
<div class="static">STATIC</div>
<div class="relative">RELATIVE</div>
<div class="absolute">ABSOLUTE</div>
</body>
</html>Output
The above code will produce the following output −
