css - 元素不从顶部移动

Question

在父元素相对位置中，我在 p 元素中包含绝对位置，但当我包含“顶部”位置时“p”元素不会移动。请看下面的代码。

<div class="btnClass">
  <p>ghghg</p>
  </div>

和CSS -

.btnClass{
  position: relative;
}
p{
  position: absolute;
  top: 20%;/*this is not working*/
  left: 15%;
  border: 1px solid red;
  display: block;
}

Answer 1

父btnClass需要一个高度

请注意，div 的宽度默认为浏览器视口(viewport)，其高度由其内容或显式设置，因此 left: 15% 有效，但顶部:20% 不是

.btnClass {
  position: relative;
  height: 200px;
}
p {
  position: absolute;
  top: 20%;
  left: 15%;
  border: 1px solid red;
  display: block;
}

<div class="btnClass">
  <p>ghghg</p>
</div>