static, relative, absolute, fixed and sticky.
✍️ 3 exercises + code challenge in this lessonThe position property controls how an element is placed. Use it with top, right, bottom and left.
static: the default, normal flow.relative: moved relative to its normal position; also becomes the reference for absolute children.absolute: positioned relative to the nearest positioned ancestor; removed from normal flow.fixed: positioned relative to the browser window; stays in place while scrolling.sticky: behaves normally until you scroll past a point, then sticks.Mastering CSS Position helps you write clean and reliable CSS code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.
<style>
.parent { position: relative; height: 140px; background: #F1F5F9; border: 2px solid #CBD5E1; }
.badge { position: absolute; top: 10px; right: 10px; background: #E34F26; color: white; padding: 4px 10px; border-radius: 99px; }
.moved { position: relative; left: 30px; top: 10px; background: #DBEAFE; display: inline-block; padding: 6px; }
.sticky { position: sticky; top: 0; background: #071A2F; color: white; padding: 8px; }
</style>
<div class="parent">
<span class="moved">relative: moved 30px</span>
<span class="badge">absolute</span>
</div>
<div style="height: 160px; overflow: auto; margin-top: 10px;">
<div class="sticky">Sticky header (scroll this box)</div>
<p>Line 1</p><p>Line 2</p><p>Line 3</p><p>Line 4</p><p>Line 5</p><p>Line 6</p>
</div>Check what you learned in “CSS Position”.
Keep the header at the top while scrolling.
header {
position: ;
top: 0;
}
An absolutely positioned element is positioned relative to…
Make .parent position relative and place .badge absolutely 10px from the top and right.
Free sign-in required · Google login available
Stuck on something?
Ask the community in the CodesInTech forum.
Need a developer?
Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.
Explore Our Services