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

36 Views Asked by Pranav Anand At 30 July 2023 at 10:10

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.

Original Q&A

There are 1 best solutions below

imhvost On 30 July 2023 at 10:43 BEST ANSWER

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>

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

There are 1 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in CSS-POSITION

Related Questions in VIEWPORT-UNITS

Trending Questions

Popular # Hahtags

Popular Questions