CSS绝对定位元素top/left百分比单位计算规则咨询

问题描述 #

将id为offwhite-character的div设置为position: absolute，并以%为单位设置top、left属性。因该元素无非static定位的祖先元素，推测它会相对于html元素定位，但在Firefox开发者工具中看不到html元素的计算值，不清楚top:20%、left:17.5%的计算基准是什么，以及这些百分比如何转换为px单位。

相关代码如下：

index.html 文件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Picasso Painting</title>
    <link rel="stylesheet" href="./new.css" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
</head>

<body>
    <div id="back-wall"></div>
    <div class="characters">
        <div id="offwhite-character">
            <div id="white-hat"></div>
            <div id="black-mask">
                <div class="eyes left"></div>
                <div class="eyes right"></div>
            </div>
            <div id="gray-instrument">
                <div class="black-dot"></div>
                <div class="black-dot"></div>
                <div class="black-dot"></div>
                <div class="black-dot"></div>
                <div class="black-dot"></div>
            </div>
            <div id="tan-table"></div>
        </div>
    </div>
</body>

</html>

new.css 样式表

body {
    background-color: rgb(184, 132, 46);
}

#back-wall {
    background-color: #8B4513;
    width: 100%;
    height: 60%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

#offwhite-character {
    width: 300px;
    height: 550px;
    background-color: GhostWhite;
    position: absolute;
    top: 20%;
    left: 17.5%;
}

解答 #

1. 定位基准：初始包含块
   当绝对定位元素没有任何非static（即relative/absolute/fixed/sticky）定位的祖先元素时，它的定位参考是初始包含块——这个包含块的尺寸等同于当前浏览器视口（viewport）的宽高，而非html元素本身（除非你给html设置了固定的宽高值）。

2. 百分比转px的计算规则

   • top/bottom的百分比：基于初始包含块的高度计算
   • left/right的百分比：基于初始包含块的宽度计算
     举个实际例子：
   • 如果当前视口宽度为1200px，那么left:17.5%的计算值为 1200px × 17.5% = 210px
   • 如果当前视口高度为900px，那么top:20%的计算值为 900px × 20% = 180px

3. 关于Firefox开发者工具看不到html计算值的说明
   默认情况下，html元素的高度为auto，会由页面内容撑开，但初始包含块的高度始终等于视口高度。你可以在Firefox元素面板的顶部层级找到html标签，展开后查看它的计算样式（Computed标签页），就能看到它的实际尺寸——多数情况下，当页面内容高度小于视口时，html的计算高度会和视口高度一致。

内容的提问来源于stack exchange，提问作者Deepak