CSS Positioning

Master layout control with CSS positioning techniques

Next Module: Layout

Positioning Fundamentals

Position Values

  • static - Default positioning
  • relative - Adjust position relative to normal position
  • absolute - Position relative to nearest positioned ancestor
  • fixed - Position relative to browser viewport
  • sticky - Mix of relative/absolute depending on scroll position
Example: 
.box {
  position: absolute;
  top: 20px;
  right: 30px;
  background-color: #e0e7ff;
  padding: 1rem;
  border-radius: 8px;
}
```

Position Example

This element is absolutely positioned at the center

Ready to Build?

CSS positioning is essential for creating complex layouts. Now try positioning your own elements in our sandbox!

Continue to Layout Tutorial