众所周知，css中的绝对定位，是相对于最近的已定位父元素的，父元素可以是相对定位、绝对定位或固定定位
那么，如果没有定位的父元素呢？相对于谁？
网上有大部分资料显示是相对于body，少部分资料是说相对于html，还有一部分资料表示相对于顶级元素。至于这个顶级元素到底是啥，不得而知。
曾经我也一度认为是相对于body的，但是今天，我要提出我的疑问，欢迎各位讨论
首先我们看一下html结构及css样式
html结构如下
<div class="outer">
<div class="inner"></div>
</div>
css样式如下
html {
height: 1100px;
padding: 50px;
background-color: blue;
}
body {
height: 1000px;
background-color: green;
padding-top: 100px;
}
.outer {
width: 400px;
height: 400px;
background-color: yellow;
}
.inner {
background-color: red;
height: 200px;
width: 200px;
}
页面如下图所示
蓝色为html，绿色为body，黄色为外层div，红色为里层div
图1-初始页面样式
设置红色div为绝对定位
我们先给body设置一个相对定位，看看红色div相对于body定位的效果（注意：红色div的父元素，即黄色div是没有定位的）
图2-相对于body定位
如上图所示，左图为top: 20px，右图为bottom: 20px，注意看右图的滚动条，是滚动到最底部的，所以是相对于body底部向上偏移20px。
上面两种情况是没有问题的，接下来我们把body的相对定位去掉，其他不变（既然没有定位的父元素时是相对于body，那么body是否定位效果应该一致）
图3-无定位的父元素
通过上图可知，body去掉相对定位后，红色div的位置发生了变化，也就是说，没有定位的父元素时，并不是相对于body的，那到底相对于谁？
根据左图，我们可以猜测是相对于html的（暂时忽略右图），接下来我们给html添加一个相对定位来看看效果
图4-相对于html定位
通过与图3对比，我们发现，右图设置bottom: 20px的效果是不一样的（注意看图3与图4右边的滚动条），也就是说，没有定位的父元素时，也不是相对于html。
结论
当没有定位的父元素时，绝对定位既不是相对于body，也不是相对于html。
从图3我们可以看出，它可能是相对于浏览器窗口首屏的，或者说相对于页面滚动到顶部时的可视区域。下面的gif可以证明这一点（黄色div，body，html都没有定位）。
那么，问题来了
- 到底相对于谁？
- 如果是顶级元素，那顶级元素是谁？
- 假设如我所说，相对于浏览器首屏（页面未滚动时的可视区域），那又该如何理解?
网友评论