Positioning a Navbar and Logo on a Landing Page

Positioning is one of the most useful — and most misunderstood — areas of CSS. Elements follow the normal document flow by default, but the position property lets you break out of that flow and place elements exactly where you need them.

The Four Position Values

Static (Default)

Every element is position: static unless you say otherwise. Static elements follow the normal document flow — block elements stack vertically, inline elements flow left to right. You cannot use top, right, bottom, or left to move a static element.

Fixed

position: fixed removes an element from the document flow and pins it to the viewport. It stays in the same spot even when the user scrolls.

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem;
  background: #333;
  color: white;
}

This is useful for cookie notices, back-to-top buttons, or floating action buttons.

Relative

position: relative keeps the element in the normal flow, but lets you nudge it from its original position using top, right, bottom, and left. The space the element originally occupied is preserved — surrounding elements do not shift.

.navbar {
  position: relative;
  top: 0;
  right: 0;
}

Relative positioning is also important as a positioning context for absolutely positioned children (more on that below).

Absolute

position: absolute removes the element from the document flow entirely. It is positioned relative to the nearest ancestor that has a position value other than static. If no such ancestor exists, it uses the viewport.

.logo {
  position: absolute;
  top: 25px;
  left: 20px;
}

If .logo is inside a <header> element that has position: relative, the logo is placed 25px from the top and 20px from the left of that header — not the page.

Building a Navbar with Logo and Links

Here is a common pattern. The navbar container is relative, so it becomes the positioning context. The logo is absolute and pinned to the top-left. The navigation links use flexbox to align to the right.

.navbar {
  position: relative;
  display: flex;
  align-items: center;
  padding: 1rem 2rem;
  background: white;
}

.logo {
  position: absolute;
  top: 50%;
  left: 2rem;
  transform: translateY(-50%);
}

.nav-links {
  margin-left: auto;
  display: flex;
  gap: 1.5rem;
  list-style: none;
}

The transform: translateY(-50%) combined with top: 50% vertically centers the logo regardless of its height. The margin-left: auto on .nav-links pushes the links to the right side of the navbar.

Common Pitfalls

• Forgetting the positioning context: If you set position: absolute on a child but no parent has position: relative, the child positions itself relative to the viewport. This is usually not what you want.
• Overlapping content: Absolute and fixed elements are removed from the flow, so other elements do not make space for them. This can cause overlap. Use margins or padding on sibling elements to compensate.
• Scrolling behavior: Fixed elements stay put when the user scrolls. Absolute elements scroll with the page. Choose based on whether you want the element to move or stay.

Wrapping Up

Understanding how static, relative, absolute, and fixed interact gives you precise control over element placement. For navbars and logos, the typical approach is a relative container with absolute children for the logo and Flexbox for the navigation links.