1. Absolute Positioning

Learn how to precisely position elements using the `position: absolute` property.

What is Absolute Positioning?

The `position: absolute` property removes an element from the normal document flow and positions it relative to its nearest positioned ancestor. If no positioned ancestor exists, it positions relative to the initial containing block.

How It Works

When an element is absolutely positioned, you can use the following properties to specify its exact position:

• `top` - Distance from the top edge
• `right` - Distance from the right edge
• `bottom` - Distance from the bottom edge
• `left` - Distance from the left edge

Practical Example

In the demo on the right, we have a container with `position: relative` and three boxes positioned absolutely at different locations. Try editing the CSS to see how the boxes move!

<div class="container">
  <div class="box box-1">Box 1</div>
  <div class="box box-2">Box 2</div>
  <div class="box box-3">Box 3</div>
</div>

.container {
  position: relative;
  width: 300px;
  height: 300px;
  background: #1a1a1a;
}

.box {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
}

.box-1 {
  position: absolute;
  top: 0;
  left: 0;
}

.box-2 {
  position: absolute;
  bottom: 20px;
  right: 10px;
}

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

Common Pitfalls

• Without a positioned parent, absolute elements position relative to the viewport
• Absolutely positioned elements don't affect other elements' positions
• Use `z-index` to control stacking order

*Next Tutorial: CSS Grid Fundamentals*