CSS绝对定位absolute元素的初始包含块不是body元素，也不是html元素

最新推荐文章于 2023-07-07 20:53:22 发布

瓜冬瓜

最新推荐文章于 2023-07-07 20:53:22 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： CSS定位 position 初始包含块 body元素 html元素

本文链接：https://blog.youkuaiyun.com/weixin_42561383/article/details/89457190

CSS 专栏收录该内容

17 篇文章

订阅专栏

CSS绝对定位的元素依据最近的定位父元素或初始包含块定位。初始包含块并非body或html元素，而是视口。文章通过示例代码解释了这一概念，并展示了定位效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

position为absolute的元素会相对于距离最近的position为relative/fixed/absolute的上级元素进行定位，如果上级元素都没有position属性，那么则相对于初始包含块定位。

初始包含块不是body元素也不是html元素，而是html元素的包含块（the initial containing block），指的是以整个 canvas (渲染内容的空间) 的坐标原点(左上)为基准，以 viewport (也就是浏览器视窗内渲染 HTML 的空间)为大小的矩形。

想详细了解可以前往w3c关于包含块及初始包含块的定义。

下面是测试代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>例子</title>
        <style type="text/css">
            html{
                background-color: yellow;
                border: 5px solid black;
            }
            body{
                width: 600px;
                height: 600px;
                background-color: grey;
                border: 5px solid red;
                color: white;
                font-size: 50px;
            }
            #box1{
                width: 200px;
                height: 200px;
                background-color: green;
                border: 5px solid blue;
            }
        </style>
    </head>
    <body>
        BODY
        <div id="box1">
            div
        </div>
    </body>
</html>

我们给html元素，body元素和div元素都加了一个边框和背景颜色，此时的效果如下：
在这里插入图片描述
被黑色边框包围的区域是html元素的区域，被红色边框包围的是body元素。
这里我们给div元素添加position:relative;和bottom: 0px;。
效果如下：

可以看出div元素不是根据body元素或html元素来定位的。