The position property is used to align the different elements in the HTML page. The position property plays an important role to make high-quality web pages.
Used Classes:
- static: This class is used to position elements according to the normal flow of the page.
- relative: In this case, the element remains in the normal flow of the document but left, right, top, and bottom effects. Elements get shifted from their original position in the document creating vacant space and other elements may adjust themselves according to the vacant space left by the element.
- absolute: Absolute elements do not follow the normal flow document instead they position themselves relative to the closest positioned ancestor. Its final position is determined using the top, bottom, left, and right.
- fixed: Fixed element does not follow normal document flow and position themselves relative to <HTML> tag. This element always sticks to the screen.
Syntax:
<element-name class="class-name">
...
</element-name>Example 1: In the below code, we will make use of the above classes to demonstrate the position property.
HTML
<!DOCTYPE html> <html lang="en">
<head>
<link rel="stylesheet" href=
<style>
body {
text-align:center;
margin:12px;
}
.gfg_relative {
height: 2000px;
width: 200px;
color: black;
font-size: 1.5rem;
font-family: sans-serif;
padding: 10px;
background-color: lightgrey;
margin-left:230px;
}
.gfg_fixed {
top: 200px;
left: 290px;
padding: 10px;
font-size: 1rem;
color: lightgreen;
height: 100px;
width: 100px;
background-color: green;
}
</style>
</head>
<body>
<h1 style="color:green;">GeeksforGeeks</h1>
<h3>A computer science portal for geeks</h3><br>
<div class="relative gfg_relative">
relative class
<div class="fixed gfg_fixed">
fixed class
</div>
</div>
</body>
</html>
|
Output:
Example 2: In the below code, we will make use of the above classes to demonstrate the position property.
HTML
<!DOCTYPE html> <html lang="en">
<head>
<link rel="stylesheet" href=
<style>
body {
text-align:center;
margin:12px;
}
.gfg_static {
height: 200px;
width: 200px;
color: black;
font-size: 1.5rem;
padding: 10px;
background-color: lightgreen;
}
.gfg_absolute {
bottom: 10px;
left: 70px;
font-size: 1.5rem;
padding: 10px;
height: 100px;
width: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<h1 style="color:green;">GeeksforGeeks</h1>
<h3>A computer science portal for geeks</h3><br>
<div class="static gfg_static">
static class
<div class="absolute gfg_absolute">
absolute class
</div>
</div>
</body>
</html>
|
Output:
Reference: https://tachyons.io/docs/layout/position/