Question

当尝试设置段落到页面顶部的距离时，它仅在将其设置为像素值时起作用，而在将其设置为％时不起作用。不管怎样，它可以与左配合使用

我尝试了％但没有用

.para1 {
  font-family: sans-serif;
  font-size: 12px;
  letter-spacing: 1px;
  color: white;
  border: none;
  position: relative;
  display: inline-block;
  max-width: 70%;
  top: 30%;
  left: 9%;
  margin: 0 auto;
  text-align: left;
}

<div class="para1">
  <p>If you're reading this I just would like to say a huge thank you for taking the time to want to know who's behind UnixCast. I'm a full-time student with a big passion for learning. I enjoy studying physics and hope to get a degree in astrophysics sometime
    in the future. I've always had a passion for creating content online. From when YouTube was at the start of its big popularity boom, I fell in love with the idea of sharing content freely for everyone to see. My goals for my content are simple:
  </p>
</div>

期望的结果是使文本响应于我给出的最高百分比。

Answer 1

好吧，因为您的<div>需要一个高度。并且您其余的CSS必须用于<p>，而不是<div>。

示例

.para1{
  position: relative;
  height: 200px;
}

p {
  top: 80%;
  left: 9%;
    margin: 0 auto;
    text-align: left;
    border: none;
    position: relative;
    display: inline-block;
    max-width: 70%;
    font-family: sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
}

<div class="para1">
            <p>If you're reading this I just would like to say a huge thank you for taking the time to want to know who's behind UnixCast. I'm a full-time student with a big passion for learning. I enjoy studying physics and hope to get a degree in astrophysics sometime in the future. I've always had a passion for creating content online. From when YouTube was at the start of its big popularity boom, I fell in love with the idea of sharing content freely for everyone to see. My goals for my content are simple:
          </p>
    </div>

这是我的fiddle

更新

新的fiddle

“左”标签有效，但顶部仅当我将其设置为px时有效，而当我将其设置为％时无效

1 个答案: