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
CSS positioning related properties
The positioning related properties in CSS allow you to control where elements appear on a webpage. CSS offers several positioning methods to place elements precisely where you want them.
Syntax
selector {
position: value;
top: value;
right: value;
bottom: value;
left: value;
}
Position Property Values
| Value | Description |
|---|---|
relative |
Element is positioned relative to its normal position |
absolute |
Element is positioned relative to its nearest positioned ancestor |
fixed |
Element is positioned relative to the viewport (browser window) |
static |
Default positioning; element follows normal document flow |
sticky |
Element is positioned based on scroll position |
Relative Positioning
Relative positioning moves an element from its normal position without affecting other elements −
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: #ff6b6b;
margin: 10px;
display: inline-block;
}
.relative-box {
position: relative;
left: 30px;
top: 20px;
background-color: #4ecdc4;
}
</style>
</head>
<body>
<div class="box">Box 1</div>
<div class="box relative-box">Relative</div>
<div class="box">Box 3</div>
</body>
</html>
Three boxes appear. The middle box (teal colored) is shifted 30px right and 20px down from its normal position, while other boxes remain in their original spots.
Absolute Positioning
Absolute positioning places an element at specified coordinates relative to its nearest positioned parent −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 300px;
height: 200px;
background-color: #f0f0f0;
border: 2px solid #333;
}
.absolute-box {
position: absolute;
top: 50px;
right: 30px;
width: 80px;
height: 60px;
background-color: #ff9f43;
color: white;
text-align: center;
line-height: 60px;
}
</style>
</head>
<body>
<div class="container">
<p>Container with relative positioning</p>
<div class="absolute-box">Absolute</div>
</div>
</body>
</html>
A gray container box appears with an orange box positioned absolutely at 50px from top and 30px from right edge of the container.
Fixed Positioning
Fixed positioning keeps an element in the same position relative to the browser window, even when scrolling −
<!DOCTYPE html>
<html>
<head>
<style>
.fixed-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background-color: #2c3e50;
color: white;
text-align: center;
line-height: 60px;
z-index: 1000;
}
.content {
margin-top: 80px;
padding: 20px;
height: 1000px;
background: linear-gradient(to bottom, #ecf0f1, #bdc3c7);
}
</style>
</head>
<body>
<div class="fixed-header">Fixed Header - Stays at Top</div>
<div class="content">
<h3>Page Content</h3>
<p>This content can be scrolled, but the header stays fixed at the top of the viewport.</p>
</div>
</body>
</html>
A dark blue header stays fixed at the top of the browser window, while the content below can be scrolled normally.
Conclusion
CSS positioning properties give you precise control over element placement. Use relative for small adjustments, absolute for exact positioning within containers, and fixed for elements that should remain visible during scrolling.
Updated on: 2026-03-15T11:24:35+05:30
100 Views
Advertisements