Loading...
Loading...
Control element display behavior and position them on the page
display: block; /* Full width, starts new line - div, p, h1 */
display: inline; /* Flows in text - span, a, strong */
display: inline-block; /* Inline but respects width/height */
display: none; /* Hidden, takes no space */
display: flex; /* Flexbox container */
display: grid; /* Grid container */position: static; /* Default - normal flow */
position: relative; /* Offset from normal position */
position: absolute; /* Positioned relative to nearest positioned ancestor */
position: fixed; /* Stays in place when scrolling (relative to viewport) */
position: sticky; /* Normal until scroll threshold, then fixed */z-index controls stacking order of positioned elements. Higher values appear on top. Only works on positioned elements (not static).
| Wrong | Why | Right |
|---|---|---|
| z-index on static element | Has no effect | Make it position: relative first |
| position: absolute without positioned parent | Relative to body - unexpected | Set parent to position: relative |
Create a fixed navbar at the top, and a card with an absolute-positioned NEW badge.
<!DOCTYPE html>
<html><head><style>
body { margin: 0; padding-top: 60px; font-family: Arial; }
.navbar { position: fixed; top: 0; width: 100%; background: #2c3e50; color: white; padding: 15px; }
.card { position: relative; width: 300px; padding: 20px; margin: 20px; border: 1px solid #ddd; border-radius: 8px; }
.badge { position: absolute; top: -10px; right: -10px; background: #e74c3c; color: white; padding: 5px 10px; border-radius: 10px; font-size: 12px; }
</style></head><body>
<div class='navbar'>My Site</div>
<div class='card'><div class='badge'>NEW!</div><h2>Special Offer</h2></div>
</body></html>