The position property controls how an element is placed in the document. Once positioned, you use top, right, bottom, and left to offset it.
| Value | Description | Offset relative to |
|---|---|---|
| static | Default - normal document flow, offsets ignored | N/A |
| relative | Offset from its normal position, still occupies space | Its own normal position |
| absolute | Removed from flow, positioned relative to nearest positioned ancestor | Nearest positioned ancestor |
| fixed | Removed from flow, stays fixed on screen during scroll | Viewport |
| sticky | Relative until scroll threshold, then fixed | Scroll container |
/* static - default, no positioning */
.static { position: static; }
/* relative - offset from normal position, still takes up space */
.relative {
position: relative;
top: 20px; /* moves DOWN 20px from normal position */
left: 30px; /* moves RIGHT 30px */
/* Original space is preserved */
}
/* absolute - removed from flow, positioned inside nearest positioned ancestor */
.container {
position: relative; /* establishes positioning context */
width: 400px;
height: 300px;
}
.absolute {
position: absolute;
top: 0;
right: 0; /* top-right corner of .container */
width: 100px;
height: 100px;
}
/* Center absolutely positioned element */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* fixed - stays in viewport during scroll */
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: white;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
}
/* sticky - relative until scroll threshold, then fixed */
.sticky-header {
position: sticky;
top: 0; /* sticks when it reaches top of viewport */
background: white;
z-index: 100;
}
/* z-index - stacking order (higher = on top) */
.modal-overlay { z-index: 999; }
.modal { z-index: 1000; }
.tooltip { z-index: 1001; }.tooltip-wrapper {
position: relative;
display: inline-block;
}
.tooltip-text {
position: absolute;
bottom: 125%; /* above the element */
left: 50%;
transform: translateX(-50%);
background: #333;
color: white;
padding: 6px 10px;
border-radius: 4px;
white-space: nowrap;
font-size: 0.85rem;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s;
z-index: 10;
}
/* Arrow pointing down */
.tooltip-text::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: #333;
}
.tooltip-wrapper:hover .tooltip-text {
opacity: 1;
visibility: visible;
}<span class="tooltip-wrapper">
Hover me
<span class="tooltip-text">This is a tooltip!</span>
</span>Explore 500+ free tutorials across 20+ languages and frameworks.