3

据我所知，当使用 css 百分比作为相对元素的属性值时，该元素会检查其父元素的值并根据该父元素大小调整大小。

绝对元素的场景是什么？我正在查看一个css文件，我发现了这个：

html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
}

可以在绝对元素上使用百分比来获取其浏览器宽度和高度吗？

4

1 回答 1

3

当一个元素有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。

于 2013-01-11T11:03:26.300 回答