Layout and responsiveness · Lesson 10 of 17
Positioning and stacking
relative, absolute, fixed and sticky.
8 minutes1 games
relative keeps the element in flow and allows offsets. absolute removes it from flow and commonly positions it against the nearest positioned ancestor. fixed is usually viewport-relative; sticky stays in flow and sticks at an inset such as top:0 within its scrolling context.
HTML
<style>
.card {position:relative; padding:40px 16px 16px; background:#fef3c7;}
.badge {position:absolute; top:8px; right:8px; background:#92400e; color:white; padding:4px;}
</style>
<article class="card"><span class="badge">New</span><h2>Python</h2><p>Learn at your pace.</p></article>| Tool | Use |
|---|---|
relative | Keeps flow space |
absolute | Out of flow |
sticky | Sticks at a scroll threshold |
Exercise
Position .badge at the top right of .card with 8px insets.
HTML
<style></style><div class="card"><span class="badge">New</span>Card</div>
Learn more from
Played 0 of 1 games
Sign in to save your progress and earn XP.