Author
CSS positioning defines how an HTML element is placed in the document. It determines whether an element follows the normal flow of the page or is manually adjusted using properties like top, right, bottom, or left.
Positioning not only affects placement but also stacking order and visibility, which are essential for building complex layouts like modals, dropdowns, fixed headers, and tooltips.
Syntax:
selector {
position: value;
}
Where value can be:
staticrelativeabsolutefixedsticky_20250916_105157.png)
static (Default)div {
position: static;
}
relativetop, right, bottom, and left to adjust its position.div {
position: relative;
top: 20px; /* Moves down 20px from its normal position */
left: 15px; /* Moves right 15px */
}
absoluterelative, absolute, or fixed).div {
position: absolute;
top: 50px;
left: 100px;
}
fixedheader {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
stickyrelative until a scroll threshold is reached, then it sticks like fixed.th {
position: sticky;
top: 0; /* Sticks to the top when scrolling */
background-color: #fff;
}CSS Positioning Complete Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Positioning Example</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
.container {
position: relative;
height: 400px;
border: 2px solid #333;
padding: 10px;
}
.static-box {
position: static;
background: lightblue;
padding: 10px;
margin-bottom: 10px;
}
.relative-box {
position: relative;
top: 20px;
left: 20px;
background: lightgreen;
padding: 10px;
}
.absolute-box {
position: absolute;
top: 50px;
right: 10px;
background: lightcoral;
padding: 10px;
}
.fixed-box {
position: fixed;
bottom: 10px;
right: 10px;
background: lightgoldenrodyellow;
padding: 10px;
border: 1px solid #333;
}
.sticky-box {
position: sticky;
top: 0;
background: lightsalmon;
padding: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="sticky-box">Sticky Box (sticks on top when scrolling)</div>
<div class="container">
<div class="static-box">Static Box (default)</div>
<div class="relative-box">Relative Box (moved 20px)</div>
<div class="absolute-box">Absolute Box (top-right corner)</div>
</div>
<div class="fixed-box">Fixed Box (always visible)</div>
<div style="height: 600px;"></div> <!-- For scroll testing -->
</body>
</html>