Normally, the browser places elements one after another in a natural flow, top to bottom. The position property lets you step outside that flow when you need to.
Five values
| Value | What it does |
|---|---|
static | The default. Normal flow. top, left etc. are ignored |
relative | Normal flow, but you can nudge the element from its original spot |
absolute | Taken out of the flow and placed relative to its nearest positioned ancestor |
fixed | Placed relative to the browser window and stays there when you scroll |
sticky | Behaves normally until you scroll past it, then sticks |
The offset properties
Position by itself does nothing visible. The movement comes from top, right, bottom and left.
index.html
HTML
<style>
.box { background: #d0e8f2; border: 1px solid #1a5276; padding: 10px; margin: 6px 40px 6px 0; }
.moved { position: relative; top: 14px; left: 30px; background: #fdebd9; }
</style>
<div class="box">Normal box</div>
<div class="box moved">Relative box, nudged 14px down and 30px right</div>
<div class="box">Normal box. It did not move to fill the gap.</div>Notice that the box below did not move up. A relatively positioned element keeps its original space.
static is the default
Every element is static until you change it. Setting top: 20px on a static element changes nothing. If an offset seems to do nothing, check position first.
The next lessons
Each value has its own lesson: relative, absolute, fixed and sticky. Overlap is controlled by z-index.