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
Absolute Positioning Using CSS
The CSS position: absolute property removes an element from the normal document flow and positions it relative to its nearest positioned ancestor (any element with position other than static). If no positioned ancestor exists, the element is positioned relative to the document body.
Syntax
selector {
position: absolute;
top: value;
left: value;
right: value;
bottom: value;
}
The position property has the following values −
static − Default positioning, follows normal document flow
relative − Positioned relative to its normal position
fixed − Positioned relative to the viewport
absolute − Positioned relative to nearest positioned ancestor
sticky − Switches between relative and fixed based on scroll
Example 1: Centering with Absolute Positioning
This example demonstrates how to center an element using absolute positioning −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 300px;
height: 200px;
background-color: #f0f0f0;
border: 2px solid #333;
margin: 20px auto;
}
.centered-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 150px;
height: 80px;
background-color: #4CAF50;
color: white;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
}
</style>
</head>
<body>
<div class="container">
<div class="centered-box">Centered</div>
</div>
</body>
</html>
A gray container with a green box perfectly centered inside it using absolute positioning and transform properties.
Example 2: Multiple Positioning Methods
This example compares absolute, relative, and fixed positioning −
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
position: relative;
width: 400px;
height: 250px;
background-color: #e8f4f8;
border: 2px solid #4a90e2;
margin: 20px;
padding: 20px;
}
.absolute-box {
position: absolute;
top: 20px;
right: 20px;
width: 100px;
height: 60px;
background-color: #ff6b6b;
color: white;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
}
.fixed-box {
position: fixed;
top: 10px;
right: 10px;
width: 120px;
height: 40px;
background-color: #feca57;
color: #333;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
z-index: 1000;
}
.normal-content {
background-color: white;
padding: 15px;
margin: 10px 0;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="parent">
<strong>Relative Parent Container</strong>
<div class="normal-content">
This is normal content that flows in the document.
</div>
<div class="absolute-box">Absolute</div>
</div>
<div class="fixed-box">Fixed to Viewport</div>
<div style="height: 200px; background: #f8f9fa; margin: 20px; padding: 20px; border-radius: 4px;">
<p>Additional content to demonstrate that the fixed element stays in place when scrolling.</p>
</div>
</body>
</html>
A blue container with normal content flow, a red "Absolute" box positioned in the top-right corner of the container, and a yellow "Fixed to Viewport" box that stays fixed to the browser window's top-right corner.
Key Points
Absolute positioning removes elements from normal document flow
The element is positioned relative to its nearest positioned ancestor
Use
top,left,right, andbottomproperties to control placementOther elements ignore absolutely positioned elements when calculating layout
Conclusion
Absolute positioning is powerful for creating overlays, tooltips, and precise element placement. Remember that absolutely positioned elements are removed from the normal document flow and positioned relative to their nearest positioned ancestor.
719 Views
