/* Static — elements flow normally */
position: static;  /* default value for all elements */

/* Offset properties are ignored */
div {
  position: static;
  top: 10px;     /* ignored */
  left: 20px;    /* ignored */
  right: 30px;   /* ignored */
  bottom: 40px;  /* ignored */
}

/* Element stays in normal flow */
<div class="static">Box 1</div>
<div class="static">Box 2</div>

/* Output */
[Box 1]
[Box 2]

/* Boxes are not offset */

/* Relative — offset from normal position, stays in flow */
position: relative;
top: 10px;      /* move 10px down from where it would be */
left: 20px;     /* move 20px right from where it would be */

/* Example with siblings */
<div class="box">Normal</div>
<div class="box relative">Offset</div>
<div class="box">Normal</div>

.box {
  width: 100px;
  height: 50px;
  margin: 10px;
}

.relative {
  position: relative;
  top: 30px;
  left: 30px;
}

/* Visual output */
[Normal]
          [Offset]  ← moved but space is preserved
[Normal]            ← not affected by offset

/* The "Offset" box appears to move but leaves a gap in its original space */

/* Slight adjustment to alignment */
.icon {
  position: relative;
  top: 2px;  /* small pixel adjustment */
  /* Fixes baseline alignment without changing layout */
}

/* Offset from a reference point */
.tooltip {
  position: relative;
  top: -5px;  /* move up slightly */
}

/* Creating a containing block for children */
.parent {
  position: relative;
  /* Now absolutely positioned children relate to this element */
}

.child {
  position: absolute;
  top: 0;
  left: 0;
  /* Positioned relative to .parent, not viewport */
}

<!-- HTML structure -->
<div class="parent relative">
  <div class="child">I'm positioned</div>
</div>

<!-- With relative -->
.parent {
  position: relative;
  width: 300px;
  height: 200px;
  /* Creates containing block for absolutely positioned children */
}

.child {
  position: absolute;
  top: 50px;
  left: 100px;
  /* Positioned relative to parent's position: relative */
}

<!-- Without relative (parent is static) -->
.parent {
  width: 300px;
  height: 200px;
  /* position: static (default) */
  /* Does NOT create containing block */
}

.child {
  position: absolute;
  top: 50px;
  left: 100px;
  /* Positioned relative to viewport, not parent! */
}

/* Offset with top and left */
.offset-down-right {
  position: relative;
  top: 20px;    /* move down 20px */
  left: 30px;   /* move right 30px */
}

/* Offset with negative values (up and left) */
.offset-up-left {
  position: relative;
  top: -20px;   /* move up 20px */
  left: -30px;  /* move left 30px */
}

/* Offset from bottom and right */
.offset-from-bottom-right {
  position: relative;
  bottom: 20px; /* move up 20px */
  right: 30px;  /* move left 30px */
}

/* Don't mix opposite directions (bottom + top, or left + right) */
/* If both are specified, one takes precedence (usually the later one) */
.confusing {
  position: relative;
  top: 20px;     /* move down 20px */
  bottom: 30px;  /* could conflict */
}

/* Use one axis consistently */
.better {
  position: relative;
  top: 20px;     /* specify just top, not bottom */
  left: 30px;    /* specify just left, not right */
}

<!-- Elements that overlap -->
<div class="box">Box 1</div>
<div class="box offset">Box 2</div>
<div class="box">Box 3</div>

.box {
  width: 100px;
  height: 100px;
  margin: 10px;
  background: lightblue;
}

.offset {
  position: relative;
  top: -50px;
  left: 50px;
  /* Visually overlaps other boxes */
  /* But which one is on top? */
}

/* Without z-index, source order determines stacking */
.offset {
  position: relative;
  top: -50px;
  left: 50px;
  /* Box 2 is on top because it comes after Box 1 in HTML */
}

/* With z-index, control stacking explicitly */
.offset {
  position: relative;
  top: -50px;
  left: 50px;
  z-index: 10;  /* Box 2 on top, even if listed later */
}

/* Adjust icon baseline */
.icon-with-text {
  position: relative;
  top: -2px;  /* move up slightly to align with text */
  margin-right: 8px;
}

/* Tooltip arrow indicator */
.tooltip {
  position: relative;
  background: white;
  border: 1px solid #cccccc;
  border-radius: 4px;
  padding: 10px;
}

.tooltip::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 20px;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-bottom-color: white;
  /* Arrow points up from tooltip */
}

/* Numbered list with hanging indent */
.numbered-list {
  padding-left: 30px;
  list-style: none;
}

.numbered-list li {
  position: relative;
}

.numbered-list li::before {
  content: counter(item) '.';
  counter-increment: item;
  position: absolute;
  left: -30px;
  width: 25px;
  text-align: right;
  /* Number hangs to the left */
}