当父级是body时，子元素设置position：absolute；定位是根据body还是document呢？

yujieyu7

85418

发布于
2015-11-03

这个自己测试一下就知道了

背景为绿色的是html，黄色的是body，红色的是定位的div

给body添加 position ：relative时

图片描述

没有添加时

图片描述

所以，你问题的答案就是定位根据的是html，而不是body

无名小贝勒

5.7k135980

发布于
2015-11-03

更新于
2015-11-03

position:absolute 元素相对最近的 position 为 absolute / relative / fixed 的祖先元素（包含块）定位，如果没有这样的祖先元素，则以初始包含块进行定位，而初始包含块并不是以<html>或<body>进行定位的。
w3c关于包含块及初始包含块的定义

我们可以做一下测试：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>position:absolute</title>
</head>
<style type="text/css">
    html{
        border: 1px solid red;
        background-color: #ee8;
    }
    body{
        width:300px;
        height: 200px;
        margin: 10px auto;
        background-color: #ccc;
        border: 1px solid blue;
    }
    div{
        width: 100px;
        height: 100px;
        background-color: #3ff;
        position: absolute;
    }
</style>
<body>body
    <div>div</div>
</body>
</html>

此时的效果如下：
图片描述