CSS Positioning

Master CSS positioning to precisely control element placement using static, relative, absolute, fixed, and sticky positioning.

CSS positioning controls where elements appear on a page. Understanding positioning is crucial for creating complex layouts, overlays, and interactive interfaces.

Position Property

The position property specifies the positioning method:

.element {
  position: static; /* Default */
  position: relative;
  position: absolute;
  position: fixed;
  position: sticky;
}

Position: Static

The default positioning. Elements follow the normal document flow.

.element {
  position: static;
  /* top, right, bottom, left have no effect */
}

Position: Relative

Positioned relative to its normal position. Creates a positioning context for absolute children.

.element {
  position: relative;
  top: 20px; /* Moves 20px down from normal position */
  left: 30px; /* Moves 30px right from normal position */
}

Key points:

Element still occupies its original space in the document flow
Other elements aren't affected by its offset position
Creates a positioning context for absolutely positioned children

<!DOCTYPE html>
<html>
<head>
<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: #3498db;
    margin: 10px;
  }
  
  .relative {
    position: relative;
    top: 20px;
    left: 20px;
    background-color: #e74c3c;
  }
</style>
</head>
<body>
  <div class="box">Box 1</div>
  <div class="box relative">Box 2 (Relative)</div>
  <div class="box">Box 3</div>
</body>
</html>

Position: Absolute

Positioned relative to the nearest positioned ancestor (not static). Removed from normal document flow.

.parent {
  position: relative; /* Positioning context */
}

.child {
  position: absolute;
  top: 10px; /* 10px from top of parent */
  right: 10px; /* 10px from right of parent */
}

Key points:

Removed from document flow (doesn't affect other elements)
Positioned relative to nearest positioned ancestor
If no positioned ancestor, uses the document body
Width shrinks to fit content (unless specified)

Centering with Absolute Position

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Alternative with known dimensions */
.centered-fixed {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 100px;
  margin-top: -50px; /* Half of height */
  margin-left: -100px; /* Half of width */
}

/* Modern approach */
.centered-modern {
  position: absolute;
  inset: 0; /* top: 0, right: 0, bottom: 0, left: 0 */
  margin: auto;
  width: 200px;
  height: 100px;
}

Position: Fixed

Positioned relative to the viewport. Stays in place when scrolling.

.fixed {
  position: fixed;
  top: 0;
  right: 0;
}

Key points:

Removed from document flow
Always positioned relative to viewport
Stays fixed during scrolling
Useful for headers, footers, modals

<style>
  .header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #333;
    color: white;
    padding: 1rem;
    z-index: 1000;
  }
  
  .content {
    margin-top: 60px; /* Account for fixed header */
  }
</style>

<header class="header">Fixed Header</header>
<div class="content">
  <p>Content that scrolls...</p>
</div>

Position: Sticky

Hybrid of relative and fixed. Switches between relative and fixed based on scroll position.

.sticky {
  position: sticky;
  top: 20px; /* Sticks when 20px from top of viewport */
}

Key points:

Acts relative until scroll threshold
Then acts fixed within parent container
Requires a threshold (top, bottom, left, or right)
Only sticks within parent container

<style>
  .nav {
    position: sticky;
    top: 0;
    background-color: white;
    padding: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 100;
  }
</style>

<nav class="nav">
  <a href="#section1">Section 1</a>
  <a href="#section2">Section 2</a>
</nav>

<section id="section1">
  <!-- Long content -->
</section>

Position Offset Properties

Control element position:

.positioned {
  position: absolute;
  
  /* Individual properties */
  top: 10px;
  right: 20px;
  bottom: 10px;
  left: 20px;
  
  /* Shorthand (modern) */
  inset: 10px 20px 10px 20px; /* top right bottom left */
  inset: 10px 20px; /* vertical horizontal */
  inset: 10px; /* all sides */
}

Practical Examples

Modal/Overlay

<style>
  .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
  }
  
  .modal {
    position: relative;
    background-color: white;
    padding: 2rem;
    border-radius: 8px;
    max-width: 500px;
    width: 90%;
  }
  
  .close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
  }
</style>

<div class="overlay">
  <div class="modal">
    <button class="close-button">×</button>
    <h2>Modal Title</h2>
    <p>Modal content...</p>
  </div>
</div>

.tooltip-container {
  position: relative;
  display: inline-block;
}

.tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  white-space: nowrap;
  margin-bottom: 5px;
}

.tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #333;
}

Badge/Notification

.button-container {
  position: relative;
  display: inline-block;
}

.badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background-color: #e74c3c;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

Floating Action Button

.fab {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: #3498db;
  color: white;
  border: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  z-index: 1000;
}

Positioning Context

Absolutely positioned elements are relative to their nearest positioned ancestor:

/* No positioning context - uses body */
.child {
  position: absolute;
  top: 10px;
}

/* Create positioning context */
.parent {
  position: relative; /* Creates context */
}

.child {
  position: absolute;
  top: 10px; /* Now relative to .parent */
}

Z-Index and Stacking

Position property enables z-index:

.element {
  position: relative; /* Required for z-index */
  z-index: 10;
}

See the Z-Index tutorial for more details.

Common Issues and Solutions

Issue: Absolute element not positioned correctly

/* Problem: No positioning context */
.parent {
  /* position: static (default) */
}

.child {
  position: absolute;
  top: 0; /* Positions relative to body! */
}

/* Solution: Create context */
.parent {
  position: relative;
}

Issue: Sticky not working

/* Problem: Missing threshold */
.element {
  position: sticky;
  /* No top/bottom/left/right specified */
}

/* Solution: Add threshold */
.element {
  position: sticky;
  top: 0; /* Required! */
}

Issue: Fixed element covers content

/* Problem: Content hidden behind fixed header */
.header {
  position: fixed;
  height: 60px;
}

/* Solution: Add margin to content */
.content {
  margin-top: 60px;
}

Best Practices

Positioning Best Practices

Use relative to create positioning contexts
Use absolute for overlays, tooltips, and decorative elements
Use fixed for persistent UI (headers, FABs, modals)
Use sticky for section headers and navigation
Always set z-index for overlapping positioned elements
Consider inset shorthand for cleaner code
Test sticky positioning across browsers
Account for fixed elements in page layout
Use transforms for better performance when positioning
Remember: positioning removes elements from normal flow

Accessibility Considerations

Ensure positioned elements don't block important content
Maintain keyboard navigation with positioned elements
Use appropriate ARIA labels for modals/overlays
Consider screen readers when hiding content off-screen
Test tab order with positioned elements

Browser Support

All position values have excellent modern browser support. Sticky positioning requires vendor prefixes for older Safari:

.element {
  position: -webkit-sticky;
  position: sticky;
}

Mastering CSS positioning is essential for creating sophisticated layouts and interactive UI components!

CSS positioning controls where elements appear on a page. Understanding positioning is crucial for creating complex layouts, overlays, and interactive interfaces.

Position Property

The position property specifies the positioning method:

.element {
  position: static; /* Default */
  position: relative;
  position: absolute;
  position: fixed;
  position: sticky;
}

Position: Static

The default positioning. Elements follow the normal document flow.

.element {
  position: static;
  /* top, right, bottom, left have no effect */
}

Position: Relative

Positioned relative to its normal position. Creates a positioning context for absolute children.

.element {
  position: relative;
  top: 20px; /* Moves 20px down from normal position */
  left: 30px; /* Moves 30px right from normal position */
}

Key points:

Element still occupies its original space in the document flow
Other elements aren't affected by its offset position
Creates a positioning context for absolutely positioned children

<!DOCTYPE html>
<html>
<head>
<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: #3498db;
    margin: 10px;
  }
  
  .relative {
    position: relative;
    top: 20px;
    left: 20px;
    background-color: #e74c3c;
  }
</style>
</head>
<body>
  <div class="box">Box 1</div>
  <div class="box relative">Box 2 (Relative)</div>
  <div class="box">Box 3</div>
</body>
</html>

Position: Absolute

Positioned relative to the nearest positioned ancestor (not static). Removed from normal document flow.

.parent {
  position: relative; /* Positioning context */
}

.child {
  position: absolute;
  top: 10px; /* 10px from top of parent */
  right: 10px; /* 10px from right of parent */
}

Key points:

Removed from document flow (doesn't affect other elements)
Positioned relative to nearest positioned ancestor
If no positioned ancestor, uses the document body
Width shrinks to fit content (unless specified)

Centering with Absolute Position

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Alternative with known dimensions */
.centered-fixed {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 100px;
  margin-top: -50px; /* Half of height */
  margin-left: -100px; /* Half of width */
}

/* Modern approach */
.centered-modern {
  position: absolute;
  inset: 0; /* top: 0, right: 0, bottom: 0, left: 0 */
  margin: auto;
  width: 200px;
  height: 100px;
}

Position: Fixed

Positioned relative to the viewport. Stays in place when scrolling.

.fixed {
  position: fixed;
  top: 0;
  right: 0;
}

Key points:

Removed from document flow
Always positioned relative to viewport
Stays fixed during scrolling
Useful for headers, footers, modals

<style>
  .header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #333;
    color: white;
    padding: 1rem;
    z-index: 1000;
  }
  
  .content {
    margin-top: 60px; /* Account for fixed header */
  }
</style>

<header class="header">Fixed Header</header>
<div class="content">
  <p>Content that scrolls...</p>
</div>

Position: Sticky

Hybrid of relative and fixed. Switches between relative and fixed based on scroll position.

.sticky {
  position: sticky;
  top: 20px; /* Sticks when 20px from top of viewport */
}

Key points:

Acts relative until scroll threshold
Then acts fixed within parent container
Requires a threshold (top, bottom, left, or right)
Only sticks within parent container

<style>
  .nav {
    position: sticky;
    top: 0;
    background-color: white;
    padding: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 100;
  }
</style>

<nav class="nav">
  <a href="#section1">Section 1</a>
  <a href="#section2">Section 2</a>
</nav>

<section id="section1">
  <!-- Long content -->
</section>

Position Offset Properties

Control element position:

.positioned {
  position: absolute;
  
  /* Individual properties */
  top: 10px;
  right: 20px;
  bottom: 10px;
  left: 20px;
  
  /* Shorthand (modern) */
  inset: 10px 20px 10px 20px; /* top right bottom left */
  inset: 10px 20px; /* vertical horizontal */
  inset: 10px; /* all sides */
}

Practical Examples

Modal/Overlay

<style>
  .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
  }
  
  .modal {
    position: relative;
    background-color: white;
    padding: 2rem;
    border-radius: 8px;
    max-width: 500px;
    width: 90%;
  }
  
  .close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
  }
</style>

<div class="overlay">
  <div class="modal">
    <button class="close-button">×</button>
    <h2>Modal Title</h2>
    <p>Modal content...</p>
  </div>
</div>

.tooltip-container {
  position: relative;
  display: inline-block;
}

.tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  white-space: nowrap;
  margin-bottom: 5px;
}

.tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #333;
}

Badge/Notification

.button-container {
  position: relative;
  display: inline-block;
}

.badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background-color: #e74c3c;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

Floating Action Button

.fab {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: #3498db;
  color: white;
  border: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  z-index: 1000;
}

Positioning Context

Absolutely positioned elements are relative to their nearest positioned ancestor:

/* No positioning context - uses body */
.child {
  position: absolute;
  top: 10px;
}

/* Create positioning context */
.parent {
  position: relative; /* Creates context */
}

.child {
  position: absolute;
  top: 10px; /* Now relative to .parent */
}

Z-Index and Stacking

Position property enables z-index:

.element {
  position: relative; /* Required for z-index */
  z-index: 10;
}

See the Z-Index tutorial for more details.

Common Issues and Solutions

Issue: Absolute element not positioned correctly

/* Problem: No positioning context */
.parent {
  /* position: static (default) */
}

.child {
  position: absolute;
  top: 0; /* Positions relative to body! */
}

/* Solution: Create context */
.parent {
  position: relative;
}

Issue: Sticky not working

/* Problem: Missing threshold */
.element {
  position: sticky;
  /* No top/bottom/left/right specified */
}

/* Solution: Add threshold */
.element {
  position: sticky;
  top: 0; /* Required! */
}

Issue: Fixed element covers content

/* Problem: Content hidden behind fixed header */
.header {
  position: fixed;
  height: 60px;
}

/* Solution: Add margin to content */
.content {
  margin-top: 60px;
}

Best Practices

Positioning Best Practices

Use relative to create positioning contexts
Use absolute for overlays, tooltips, and decorative elements
Use fixed for persistent UI (headers, FABs, modals)
Use sticky for section headers and navigation
Always set z-index for overlapping positioned elements
Consider inset shorthand for cleaner code
Test sticky positioning across browsers
Account for fixed elements in page layout
Use transforms for better performance when positioning
Remember: positioning removes elements from normal flow

Accessibility Considerations

Ensure positioned elements don't block important content
Maintain keyboard navigation with positioned elements
Use appropriate ARIA labels for modals/overlays
Consider screen readers when hiding content off-screen
Test tab order with positioned elements

Browser Support

All position values have excellent modern browser support. Sticky positioning requires vendor prefixes for older Safari:

.element {
  position: -webkit-sticky;
  position: sticky;
}

Mastering CSS positioning is essential for creating sophisticated layouts and interactive UI components!

CSS Positioning

On this page

CSS Positioning

On this page