Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Aligning elements using the position property in CSS
The CSS position property is used to control how elements are positioned within their containing element or the viewport. It works together with positioning properties like top, right, bottom, and left to precisely place elements.
Syntax
selector {
position: value;
top: value;
right: value;
bottom: value;
left: value;
}
Position Values
| Value | Description |
|---|---|
static |
Default positioning; follows normal document flow |
relative |
Positioned relative to its normal position |
absolute |
Positioned relative to nearest positioned ancestor |
fixed |
Positioned relative to the viewport |
sticky |
Switches between relative and fixed based on scroll |
Example: Absolute and Relative Positioning
This example demonstrates how absolute and relative positioning work together to create a layout −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 300px;
height: 200px;
background-color: #f06d06;
border: 2px solid #333;
margin: 20px;
}
.absolute-element {
position: absolute;
top: 20px;
right: 20px;
width: 100px;
height: 50px;
background-color: #dc3545;
color: white;
text-align: center;
line-height: 50px;
}
.relative-element {
position: relative;
top: 10px;
left: 20px;
width: 150px;
height: 60px;
background-color: #28a745;
color: white;
text-align: center;
line-height: 60px;
}
</style>
</head>
<body>
<div class="container">
Container (relative)
<div class="absolute-element">Absolute</div>
<div class="relative-element">Relative</div>
</div>
</body>
</html>
An orange container with a red "Absolute" box positioned in the top-right corner and a green "Relative" box offset from its normal position appears on the page.
Example: Fixed Positioning
Fixed positioning creates elements that stay in place when scrolling −
<!DOCTYPE html>
<html>
<head>
<style>
.fixed-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background-color: #333;
color: white;
text-align: center;
line-height: 60px;
z-index: 1000;
}
.content {
margin-top: 80px;
padding: 20px;
height: 1000px;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="fixed-header">Fixed Header</div>
<div class="content">
<h3>Content Area</h3>
<p>This content area is very tall to demonstrate scrolling. The header above remains fixed at the top of the viewport.</p>
</div>
</body>
</html>
A black header bar stays fixed at the top of the page, while the gray content area below can be scrolled. The header remains visible during scrolling.
Conclusion
The position property is essential for creating complex layouts. Use relative for small adjustments, absolute for precise positioning within containers, and fixed for elements that should remain visible during scrolling.
Updated on: 2026-03-15T13:58:41+05:30
108 Views
Advertisements