MDN confusing concept for top property

May 14, 2023

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

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

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 .

>Solution :

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.