假设有一个相对定位的 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 放入容器中并且成功了。它移动的量与包含元素的高度相关。
为此，您需要将
heightmin-heightdisplay: gridbody {
min-height: 100vh;
display: grid;
}
div {
position: relative;
height: 300px;
width: 300px;
top: 20%;
}<div>Hello</div>