MDN confusing concept for top property

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.text {
  position: relative;
  top: 50%;
  left: 50%;
  }

<!-- language: lang-html -->

<a class="text">Hello</a>

<!-- end snippet -->

Top

> So As per MDN Top link quote:When position is set to relative, the top property specifies the distance the element's top edge is moved below its normal position.

So as per above quote my understanding is element's top edge should be moved below its normal position by 50% so why isn't it happening . Browser is EDGE 11.3 .

MDN links to the specification.

Look carefully at what a percentage length means in this context:

> The inset is a percentage relative to the containing block’s size in the corresponding axis (e.g. width for left or right, height for top and bottom). For sticky positioned boxes, the inset is instead relative to the relevant scrollport’s size. Negative values are allowed.

The height of the containing block is auto (the default) and when a percentage is calculated of auto you get 0.

50% of what? The answer is 50% of the parent element. But by default, the parent element is only tall enough to contain the things within it. If you set a height on the parent element to completely fill the vertical height of the page, you will see that this element moves down to 50% of that, like this:

<!-- begin snippet: js hide: false console: true babel: null -->

<!-- language: lang-css -->
html, body {
height: 100%;
}

.text {
  position: relative;
  top: 50%;
  left: 50%;
  }

<!-- language: lang-html -->

<a class="text">Hello</strong>

<!-- end snippet -->

Or a fixed height, like this:

<!-- begin snippet: js hide: false console: true babel: null -->

<!-- language: lang-css -->
html, body {
height: 200px;
}

.text {
  position: relative;
  top: 50%;
  left: 50%;
  }

<!-- language: lang-html -->

<a class="text">Hello</a>

<!-- end snippet -->