CSS Fundamentals

Positioning

⏱ 7 min read📖 Intermediate

CSS positioning controls exactly where an element sits on the page. With it you can fix a navbar to the top of the screen, layer text over a movie card, or pin a badge to the corner of a thumbnail — none of which are possible with normal document flow alone.

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}

.movie-card {
  position: relative;
}

.movie-card .label {
  position: absolute;
  bottom: 8px;
  left: 8px;
}

Let me ask you something.

Have you ever tried to get a navbar to stay at the top of the page while the user scrolls? Or tried to put a badge in the corner of a card, or layer text on top of an image?

If you tried to do any of that with just margin and padding you probably ran into a wall. Those properties push elements around inside the normal document flow. They cannot pull an element out of that flow and pin it wherever you want.

CSS positioning is what lets you do that.

There are five position values and they all behave differently. But once you understand the logic behind each one everything clicks into place. Let us go through them one by one using the Netflix clone so every example feels like you are actually building something.

How Positioning Works

By default every element sits in the normal document flow. Elements stack top to bottom, take up their natural space, and push other elements around them.

When you give an element a position value other than static, you unlock four offset properties that let you move it around:

top — distance from the top edge.

bottom — distance from the bottom edge.

left — distance from the left edge.

right — distance from the right edge.

Which edge those offsets measure from depends on which position value you use. That is the key to understanding positioning.

position: static

static is the default. Every element is statically positioned unless you say otherwise. The offset properties — top, bottom, left, right — have no effect on static elements.

You will almost never write position: static yourself. It just means leave this element in its natural place in the flow.

position: relative

relative moves an element relative to where it would normally sit. The element still takes up its original space in the document — it just visually shifts from that natural position.

The second card shifted down 20px from where it would normally sit. Notice the gap it left behind — the space is still reserved, the card just moved visually.

On its own, nudging things with relative is rarely useful. The real power of position: relative is that it creates a positioning context for absolutely positioned children inside it. That is what the next section is about.

position: absolute

absolute pulls an element completely out of the document flow. It no longer takes up space. It positions itself relative to the nearest ancestor that has a position value other than static.

This is the combination you will use constantly: position: relative on the parent, position: absolute on the child.

A perfect real example is a badge overlaid on a movie card.

The badge sits in the top-left corner of the card, layered on top of the image. Try changing top: 8px; left: 8px to bottom: 8px; right: 8px and watch it jump to the bottom-right corner.

💡

The most common mistake with position: absolute is forgetting to add position: relative to the parent. Without it the absolutely positioned child will travel up the DOM looking for a positioned ancestor, and if it finds none it positions itself relative to the entire page. Always set the parent to position: relative.

Overlaying a Title on a Movie Card

Now let us use absolute positioning to overlay a movie title at the bottom of a card — the way Netflix and every streaming site does it.

The gradient overlay fades from dark at the bottom to transparent at the top. The title sits cleanly at the bottom of the card. This is exactly the pattern used on real streaming sites.

position: fixed

fixed positions an element relative to the browser window itself — not to any parent element. It stays in the same place on screen even when the user scrolls. This is exactly what you need for a sticky navbar.

The navbar stays pinned to the top of the scrollable area no matter how far down you go.

💡

When you use position: fixed on a navbar the navbar is removed from the document flow. This means page content will slide underneath it. Always add a padding-top to your main content equal to the height of the navbar so nothing gets hidden behind it.

position: sticky

sticky is a hybrid. The element behaves like a normal in-flow element until the user scrolls it to a threshold — then it sticks in place like a fixed element.

A great use case is section headings that stick to the top as you scroll through a long list.

Scroll down inside the box. Each section heading sticks to the top as you pass it, then gets replaced by the next one. This pattern is used in contact lists, playlist UIs, and dashboards everywhere.

z-index

When positioned elements overlap each other you need to control which one appears on top. That is what z-index does. Elements with a higher z-index sit on top of those with a lower one. Think of it as layers — higher number means closer to you.

Card 3 sits on top, Card 1 is at the back. Try swapping the z-index values and watch the stacking order change.

💡

z-index only works on elements that have a position value other than static. Keep your values simple — use 1, 2, 3 for normal stacking, and reserve higher values like 10 or 100 for navbars and modals so you always have room to slot things in between.

Building the Netflix Clone

Let us bring everything together. A sticky navbar, movie cards with gradient title overlays, a red New badge, and correct z-index layering so nothing gets hidden underneath something else.

The navbar sticks to the top. Each card has a gradient overlay with the title. The first card has a red New badge. The z-index values keep the badge above the overlay and the navbar above everything.

In the next lesson I am going to show you CSS Transitions — how to add smooth hover animations to buttons and cards so your Netflix clone feels polished and alive. Come on in.

Learn about CSS Transitions →

Have anything to say about this lesson?

Your feedback helps improve these tutorials. If something was confusing or missing, let us know.