据我所知，当使用 css 百分比作为相对元素的属性值时，此元素会检查其父元素的值并根据此父元素大小调整大小。
绝对元素的场景是什么？ 我正在查看一个 css 文件，我发现了这个:
html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow-x: hidden;
}
在绝对元素上设置百分比来获取其浏览器宽度和高度是否可以？
最佳答案
当元素具有 position:absolute 时，width 和 height 百分比是根据整个浏览器尺寸计算的。
见下面代码:
<html>
<head>
<style>
#a {
position: absolute;
width:50%;
}
</style>
</head>
<body onload="alert(document.getElementById('a').offsetWidth);">
<div style="width:200px;">
<div id="a">Hello</div>
</div>
</body>
</html>
即使父 div 的宽度只有 200px，该元素也会显示浏览器宽度的一半。
一旦我将其更改为 position:relative;，警报将显示 100。
关于html - 绝对元素的百分比值是指浏览器的宽度和高度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14276317/