为什么顶部偏移量（以 % 为单位）不会垂直移动相对定位的元素？-解网

问：

假设有一个相对定位的 div 元素。当我以 % 为单位设置最高值时，它什么也没做。但是只要我用px表达它，它就会起作用。有什么特别的原因/逻辑吗？

这是行不通的

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

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

虽然这有效

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

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

我试着把这个div放在一个容器里，它起作用了。它移动的量与包含元素的高度是真实的。

html css css-position 视口单元

这是一个有趣的问题。根据 CSS 规范，没有定义高度的容器顶部和底部的百分比应该有效。与高度、边距和填充不同，包含块的高度不依赖于顶部和底部值 - 即没有循环依赖性 - 因此没有技术限制为什么它不能工作。似乎不是这样，因为 Web 兼容性和浏览器互操作性意味着浏览器的行为无法更改。IMO，CSS定位规范需要更新。

0赞 imhvost 7/31/2023

@Alohci 请注意，这里position: relative;

0赞 Alohci 7/31/2023

@imhvost - 是的，确实如此。我的观点是，垂直百分比可以（并且符合规范）适用于 .position:relative

答：

2赞 imhvost 7/30/2023 #1

为此，您需要设置为父元素，或 + ：heightmin-heightdisplay: 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?

评论