position

Controls how an element is placed relative to the page’s normal flow. Together with top, right, bottom, left and z-index, it lets you overlap elements or pin them on screen.

static (default): the element follows the normal flow and ignores top, right, bottom, left and z-index.
relative: keeps its space in the flow and is offset from its original position.
absolute: leaves the flow and is placed relative to its nearest positioned ancestor.
fixed: leaves the flow and is placed relative to the viewport; it does not move on scroll.
sticky: behaves as relative until it reaches the given threshold, then sticks inside its container.
inset: shorthand to write top, right, bottom and left in a single property.

Example

Child 2 has the item class. Change position and scroll inside the container to see how each value reacts. Notice how the other children take its space when it leaves the flow.

ResultLiveContainer width100%

html

<div class="container">
  <div class="child">1</div>
  <div class="child item">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
</div>

<div class="container">
  <div class="child">1</div>
  <div class="child item">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
</div>

css

.container {
  border: 1px solid #2b7de0;
  height: 15rem;
  overflow: auto;
  padding: 0.5rem;
  position: relative;
}

.child {
  margin-bottom: 0.5rem;
  padding: 1rem;
}

.item {
  background: #d9d2f5;
  left: 2rem;
  position: static;
  top: 1rem;
  width: 60%;
  z-index: 1;
}

.container {
  border: 1px solid #2b7de0;
  height: 15rem;
  overflow: auto;
  padding: 0.5rem;
  position: relative;
}

.child {
  margin-bottom: 0.5rem;
  padding: 1rem;
}

.item {
  background: #d9d2f5;
  left: 2rem;
  position: static;
  top: 1rem;
  width: 60%;
  z-index: 1;
}

Edit the code or use the selectors: the result updates instantly.