Positioning
📌 Covered in this chapter:
static · relative · absolute · fixed · sticky · top/right/bottom/left · Containing Block · z-index · Stacking Context · Sticky Sidebar · Fixed Header · Modal
Welcome to Chapter 20: Positioning — part of the CSS Complete Roadmap. This lesson covers all subtopics with clear explanations, code examples, and best practices used in professional web development.
1Position Values
| Position | Behavior |
|---|---|
static | Default — normal document flow |
relative | Own position nundi offset — space reserved |
absolute | Nearest positioned ancestor ki relative |
fixed | Viewport ki relative — scroll avvadu |
sticky | Hybrid — scroll until threshold, then fixed |
2Sticky Sidebar & Fixed Header
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
}
.sidebar {
position: sticky;
top: 20px;
align-self: start;
}3Containing Block, z-index & Stacking Context
Containing block: Absolute positioned elements nearest position: relative/absolute/fixed/sticky ancestor ni reference ga use chestayi.
CSS — Modal
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
}
.modal {
position: relative;
z-index: 1001;
}Stacking context: New context creates properties — position + z-index, opacity < 1, transform, filter. z-index only same context lo compare avuthundi.