Question 168482 in Html Question posted in
Some basic documentation can be found here.

Is HTML’s MDN top property confusing?

.text {
  position: relative;
  top: 50%;
  left: 50%;
  }
<a class="text">Hello</a>

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 .

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 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:

    html, body {
    height: 100%;
}

.text {
  position: relative;
  top: 50%;
  left: 50%;
  }
    <a class="text">Hello</strong>

    Or a fixed height, like this:

    html, body {
    height: 200px;
}

.text {
  position: relative;
  top: 50%;
  left: 50%;
  }
    <a class="text">Hello</a>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search