Why absolute element does not keep position when parent scroll

Issue

.wrap {
  max-height: 200px;
  overflow-y: auto;
  position: relative;
  border: 2px solid green;
}

.content {
  height: 1000px;
}

.absolute {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: red;
}

<div class="wrap">
  <div class="content"></div>
  <div class="absolute">absolute</div>
</div>

As you can see in snippet. When I scroll the .wrap, the .absolute also go away too. Why this happen. And how can I keep the .absolute on the bottom.

Solution

With position: sticky;, like so:

.wrap {
  max-height: 200px;
  overflow-y: auto;
  position: relative;
  border: 2px solid green;
}

.content {
  height: 1000px;
}

.absolute {
  position: sticky;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: red;
}

<div class="wrap">
  <div class="content"></div>
  <div class="absolute">absolute</div>
</div>

For a broader explanation on the why, you may read this article about positioning.

Answered By - iorgv