⬡ CSS Layout Concepts
Main Web Page
Explore fixed positioning, sticky headers, input states, tables, margin collapse and relative positioning — all in one place.
01 — Sticky
📌 Sticky Section Title
Scroll down inside this page. The title above stays pinned just below the navbar — that's position: sticky at work.
↑ You scrolled past the spacer. Title stayed pinned.
02 — Input
Input Field
03 — Iframe
Iframe Example
04 — Table
Table Example
| Column A | Column B | Status |
|---|---|---|
| Alpha | Beta | ● Active |
| Gamma | Delta | ● Pending |
05 — Margin Collapse
Margin Collapse Example
Box 1 has margin-bottom: 50px and Box 2 has margin-top: 30px. They collapse to 50px.
Box 1 — margin-bottom: 50px 50px
Box 2 — margin-top: 30px 30px
06 — Position Relative
Position Relative Example
Box 4 has position: relative; top: 24px — it shifts down but its original space is preserved.
Box 3 — static flow
Box 4 — relatively moved ↓
07 — 2D & 3D Transform Demo
Open Transform Playground
Click the button below to open the 2D/3D transformations demo page.
Open 2D/3D Transform Demo08 — Bootstrap Grid
Interactive Bootstrap Grid Demo
Open the animated grid playground with nested and responsive example cards.
Open Bootstrap Grid Demo