Positioning in CSS - Types, Examples, and Best Practices

CSS Positioning

Positioning is an essential CSS technique that allows you to control where elements appear on the page. Unlike the normal document flow, where elements are stacked one under another, positioning gives you the freedom to move, fix, or overlap elements exactly where you need them. It is extremely useful for custom layouts, tooltips, banners, menus, notifications, and much more.

Types of Positioning

CSS offers five main types of positioning, each with different behaviors. Let's explain them one by one:

static – this is the default value. Elements with position: static cannot be moved using top, left, right, or bottom. They follow the normal flow of the page, exactly as written in HTML.
relative – the element stays in the normal flow but can be moved relative to its original position. It's as if you "push" the element slightly up, down, left, or right without affecting other elements.
absolute – the element is completely removed from the document flow and is positioned relative to the nearest parent that has position: relative or another positioning type. If no such parent exists, it positions itself relative to <html>.
fixed – the element is fixed relative to the browser window. It does not move when the user scrolls the page. It is ideal for banners, "scroll to top" buttons, or persistent notifications.
sticky – a hybrid between relative and fixed. The element behaves normally until it reaches a specific point (usually top), then "sticks" and remains visible at that spot as the user scrolls.

Example: relative positioning

In this example, the element is moved 20px down and 30px to the right from its initial position. Notice that the space it occupies in the page remains the same.

🔧 Live Example: relative positioning

<div class="box">Relative Box</div>

.box {
  position: relative;
  top: 20px;
  left: 30px;
  background: lightblue;
  padding: 1rem;
  width: 200px;
  text-align: center;
}

Example: absolute positioning inside a relative container

Here we have a blue container with position: relative. The red element inside has position: absolute and is positioned relative to the top-right corner of the container. If we had not set relative on the container, the badge would have positioned itself relative to the entire page.

🔧 Live Example: absolute positioning

<div class="container">
  <div class="badge"></div>
</div>

.container {
  position: relative;
  width: 300px;
  height: 200px;
  background: lightblue;
}

.badge {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  background: crimson;
}

Example: fixed positioning

The banner below is fixed at the bottom of the screen. Even when you scroll the page, it remains visible. This technique is often used for notifications, navigation bars, or action buttons.

🔧 Live Example: fixed positioning

<div class="banner">Fixed bottom banner</div>

.banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #222;
  color: white;
  text-align: center;
  padding: 1rem;
}

Example: sticky positioning

The header below behaves normally until it reaches the top of the viewport. Then it "sticks" and remains there while you scroll. This is ideal for section titles or menus that need to stay visible.

🔧 Live Example: sticky positioning

<div class="header">Sticky Header</div>
<div class="content">Long content for scrolling...</div>

.header {
  position: sticky;
  top: 0;
  background: #333;
  color: white;
  padding: 1rem;
}

.content {
  height: 1000px;
  background: #eee;
}

Best Practices

Use position: relative on the parent when you want a child with absolute to position relative to that parent.
Don't overuse z-index. Use it only when you need to control overlapping. Large values can create hard-to-manage conflicts.
sticky works only if the element has a scroll context and is not affected by overflow: hidden on the parent.
Test positioning on different resolutions and devices. What works on desktop may be annoying on mobile.

💡 Tip: Positioning is a powerful tool but should be used carefully. It does not replace modern layouts like Flex and Grid, but complements them in specific situations — such as badges, tooltips, banners, or floating elements.

🧠 Quiz – CSS Positioning

Pseudo-classes ➔