CSS Positioning · Astro Tech Blog

Web Development / Frontend / CSS

Positioning

The position property controls how an element is placed in the document.

Demo: Position Values

HTML

<div class="container">
<div class="static">static (default)</div>
<div class="relative">relative</div>
<div class="absolute">absolute</div>
<div class="fixed-demo">fixed</div>
</div>

CSS

.container {
position: relative;
background: #f1f5f9;
padding: 12px;
height: 180px;
margin-bottom: 60px;
border: 2px dashed #cbd5e1;
}
div[class] { padding: 8px 12px; margin: 4px; border-radius: 4px; font-weight: bold; color: white; }
.static { position: static; background: #64748b; }
.relative { position: relative; top: 8px; left: 16px; background: #6366f1; }
.absolute { position: absolute; bottom: 12px; right: 12px; background: #059669; }
.fixed-demo { position: absolute; top: -8px; right: -8px; background: #dc2626; padding: 4px 8px; font-size: 0.75rem; }

Live Output Window

Position Values

Value	Behavior
`static`	Normal document flow (default)
`relative`	Offset from normal position using `top`, `right`, `bottom`, `left`
`absolute`	Removed from flow, positioned relative to nearest positioned ancestor
`fixed`	Removed from flow, positioned relative to viewport
`sticky`	Toggles between relative and fixed based on scroll

Offset Properties

Once position is set to anything other than static, you can use:

top / bottom — vertical offset
left / right — horizontal offset

Demo: Sticky Positioning

HTML

<div class="scroll-area">
<div class="sticky">I am sticky</div>
<p>Scrollable content line 1</p>
<p>Scrollable content line 2</p>
<p>Scrollable content line 3</p>
</div>

CSS

.scroll-area {
height: 150px;
overflow-y: auto;
border: 1px solid #cbd5e1;
padding: 8px;
}
.sticky {
position: sticky;
top: 0;
background: #6366f1;
color: white;
padding: 8px;
font-weight: bold;
z-index: 1;
}
p { margin: 8px 0; color: #475569; }

Live Output Window