元素未从顶部移动 [英] Element not moving from top

问题描述

相对于父元素位置而言，我在p元素中包含绝对位置，但是当我包含"top"位置时"p"元素不移动.请看下面的代码.

within a parent element position relative, i include position absolute in an p element but the "p" element not moving when i include "top" position..look at the code below..

<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;
}

推荐答案

父级btnClass需要高度

注意，div的宽度默认为浏览器视口，其高度取决于其内容或显式设置，因此left: 15%起作用，而top: 20%无效

Note, a div's width defaults to browser viewport, its height by its content or explicit set, hence the left: 15% work but the top: 20% not

.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>

这篇关于元素未从顶部移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！