htmlcsscss-positionviewport-units

Why does top offset, when given in % doesn't move the relatively positioned element vertically?

Let's say there's a relatively positioned div element. When I set the top value in %, it does nothing at all. But as soon as I express it in px, it works. Is there any particular reason/logic?

This doesn't work

<style>
div{
  position:relative;
  height:300px;
  width:300px;
  top:20%;
}
</style>

<body>
<div>Hello</div>
</body>

While this works

<style>
div{
  position:relative;
  height:300px;
  width:300px;
  top:20px;
}
</style>

<body>
<div>Hello</div>
</body>

I tried putting this div inside a container and it worked. And the amount it moved was realtive to the height of the containing element.

Solution

  • For this to work, you need to set height to parent element, or min-height + display: grid:

    body {
  min-height: 100vh;
  display: grid;
}

div {
  position: relative;
  height: 300px;
  width: 300px;
  top: 20%;
}
    <div>Hello</div>