Position absolute vs fixed on mobile device

Question

I Have the following HTML snippet:

.parent {
  height: 100vh;
  position: relative;
  background: MediumSeaGreen;
}

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

<div class="parent">
  <div class="child">
    Hello World!
  </div>
</div>

If I use position: absolute on the child I get a vertical scroll while seeing the page on a mobile device. If I change that position to position: fixed I don't have the scroll.

I am trying to understand why the scroll appears with position absolute and why it doesn't with position fixed. From my understanding position absolute is relative to the nearest parent that have position: relative. In my case that's the first div which occupies the full screen.

Shouldn't position absolute be contained in the parent div and the scroll be prevented? In other words shouldn't the height of the page be maintained at 100vh since position: absolute is removed from the flow of the page?

Note: I get the scroll on Chrome and Safari. With Firefox it works as expected on a mobile device. I tested with an IOS device and an Android one.

Answer 1

There's been a couple of comments that are a little misleading so here's an explanation.

When you position an element absolute, as you say it is positioned in relation to its nearest positioned ancestor which in this case is the div which has height 100vh.

However, browsers by default put margins onto some elements and you have not removed these.

That the child element is fully within the parent can be seen if you make its background transparent. The green of the parent continues underneath it.

.parent {
  height: 100vh;
  position: relative;
  background: MediumSeaGreen;
}

.child {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  /*background-color: white;*/
  background-color: transparent;
  color: black;
}

<div class="parent">
  <div class="child">
    Hello World!
  </div>
</div>

Now, why is there scrolling?

At the very top you can notice some white. This is margin space set by the browser.

If we set all margins to 0 by default it disappears and there is no need for scrolling as the parent element fits the viewport exactly and it starts right at the top of it now.

* {
  margin: 0;
}

.parent {
  height: 100vh;
  position: relative;
  background: MediumSeaGreen;
}

.child {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  /* background-color: white;*/
  background-color: transparent;
  color: black;
}

<div class="parent">
  <div class="child">
    Hello World!
  </div>
</div>

In the case of the child being fixed, it is (in many cases, though not all) fixed in relation to the viewport so it will be right at the top of the screen whether or not the browser is adding margins to elements.

It's not the position here but there are exceptions to this - if there is an ancestor that has a transform property. See https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning