CSS Tutorial
CSS Position
static, relative, absolute, fixed, and sticky. Offset properties only work after you leave static.
Five ways to place a box
By default every element is position: static. It sits in normal flow. top,right, bottom, left, and z-index do nothing until you change that. The other four values let you nudge, pin, or stick a box.
| Value | In the flow? | Offsets relative to |
|---|---|---|
static | Yes | Offsets ignored |
relative | Yes — original gap kept | Its normal position |
absolute | No | Nearest positioned ancestor |
fixed | No | The viewport |
sticky | Yes, until it sticks | Its nearest scrollport |
relative — nudge and keep the gap
relative offsets the box from where it would have been. The original space stays empty, so later content does not slide up. Use it for a small shift, or as an anchor for an absolute child.
Example
<style>
.line {
background: #e0f2fe;
padding: 0.75rem;
color: #0369a1;
}
.nudge {
position: relative;
top: 0.5rem;
left: 1rem;
background: #ccfbf1;
color: teal;
padding: 0.35rem 0.6rem;
}
</style>
<p class="line">North quay hours stay 8–16.</p>
<span class="nudge">Harbor studio</span>
<p class="line">The gap above this line is still reserved.</p>absolute — pin to a positioned parent
An absolute box leaves the flow. Neighbors act as if it is not there. Offsets are measured from the nearest ancestor whose position is not static. If none exists, the initial containing block (the page) is used. Put position: relative on the card you want to pin to.
Example
<style>
.card {
position: relative;
padding: 1.5rem 1rem 1rem;
background: #e0f2fe;
border: 2px solid teal;
color: #0f766e;
}
.badge {
position: absolute;
top: 0.4rem;
right: 0.4rem;
background: teal;
color: white;
padding: 0.2rem 0.5rem;
font-size: 0.8rem;
}
</style>
<article class="card">
<span class="badge">Slip 4</span>
<p>Harbor studio — sky gallery. Seats face the teal dock.</p>
</article>Do not build a whole page with absolute boxes. They ignore later content and break when text wraps. Use them for badges, close buttons, and overlays. Use flex or grid for the rest.
fixed and sticky
fixed pins a box to the viewport. It stays put while the page scrolls — a floating hours chip, a back-to-top control. sticky behaves like relative until the scroll hitstop (or another offset), then it sticks inside its parent.
Example
<style>
.board {
max-height: 8rem;
overflow: auto;
border: 2px solid teal;
background: #f8fafc;
}
.sticky-bar {
position: sticky;
top: 0;
background: teal;
color: white;
padding: 0.4rem 0.75rem;
}
.board p {
margin: 0.75rem;
color: #475569;
}
</style>
<div class="board">
<div class="sticky-bar">Tide board — Harbor studio</div>
<p>08:00 North quay open.</p>
<p>10:30 Sky gallery tour.</p>
<p>13:00 Lantern desk walk-ins.</p>
<p>16:00 Last call on Slip 4.</p>
<p>Scroll this list. The teal bar stays at the top of the board.</p>
</div>Sticky only works if a parent does not use overflow: hidden (or another clip that creates a short scrollport). The example uses overflow: auto on the board so you can see the stick inside the preview.
What to do next
Offsets place the box in the plane of the page. Z-index places it in front or behind when boxes overlap. Learn that next, then come back tooverflow if a sticky parent is clipping the wrong way.
Worked examples
The short listings above show one property. These sheets paint documents you would actually ship: a lab dashboard, a clinic form, a marks table, a nav bar.
CSS does not invent meaning. HTML already said what the pieces are. Cascade, specificity, and the box model decide how they look. The numbers are classroom values — current, pH, pulse, 3-4-5 — so the style has something real to sit on.
Preview them in the CSS editor at /css/try. Change one property and watch the page paint. The tags stay the same.
Engineering
A badge on a logger card
static is the default. relative nudges without leaving the flow. absolute takes the box out and pins it to the nearest positioned ancestor (relative on the wrap).
fixed is the viewport. sticky is relative until a scroll threshold, then it pins. Offsets top/right/bottom/left do nothing on static.
Example
<style>
.wrap { position: relative; background: #e0f2fe; padding: 1.2rem; }
.badge { position: absolute; top: 6px; right: 8px; color: #0f766e; }
</style>
<div class="wrap">Field 12 mT<span class="badge">live</span></div>Biology
A sticky clinic bar
sticky top: 0 keeps the name in view while you scroll a long notes page. A parent with overflow: hidden can kill sticky. The preview is short; stretch it in /css/try.
Example
<style>
.bar { position: sticky; top: 0; background: #9f1239; color: #fff; padding: 0.4rem; }
.long { height: 90px; }
</style>
<div class="bar">Riverside clinic</div>
<p class="long">Scroll the preview to pin the bar.</p>