众所周知, 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 都没有定位).
那么, 问题来了
到底相对于谁?
如果是顶级元素, 那顶级元素是谁?
假设如我所说, 相对于浏览器首屏 (页面未滚动时的可视区域), 那又该如何理解?
来源: http://www.jianshu.com/p/1166e1b32b6a