logo标签列表

绝对定位元素中的百分比值是指浏览器的宽度和高度吗？

htmlcss
3
据我所知，当使用css百分比作为相对元素的属性值时，该元素会检查其父级的值，并根据该父级的大小调整自身大小。
绝对元素的情况是什么？ 我正在查看一个css文件，发现以下内容：
html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
}

在绝对定位元素上使用百分比以获取其浏览器宽度和高度，这样做是否可行？

1
据我所知，即使使用"position: absolute;"，"% widh" 仍然指的是它们的父元素。可能是错的，所以这只是一条注释。 - Kyle
@Kyle Sevenoaks：这似乎是规范所说的（width和height），但我可能读错了。请参见下面的反例。 - BoltClock
2
@Kyle Sevenoaks: 失败了。 我已经多次看到这个规范，但这次我不知怎么就解释错了。绝对定位元素的包含块通常是视口（除了这里不适用的例外情况），这就是规范所指的。也许我只是累了。 - BoltClock
嗯，这很有趣，我本来以为是这样的。但还是谢谢你解释清楚了 :) - Kyle
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”。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接