body的子元素的定位问题

今天到蓝色理想做腾讯面试题遇到

运行代码

如我们所看到的一样，绝对居中实现了！但我要考究的是那个绝对定位的DIV究竟是以哪个元素作为参照物呢？！书上都说了，是以一个被定位的祖先元素为参照物，其position值为relative,absolute,fixed!我们逐个试一下！

运行代码

十字架贴到正上方去！

运行代码

哇，好神奇啊，这次是贴到左上角中去！我猜测是body会根据更上级的元素定位，由于我们没有为body设置偏移量（top与left），游览器会使用默认值，如top:0,left:0，可能随游览器的不同而不同的……但如果给的默认值相同的话，那么怎样解释上面body{position:relative}的现象呢？先不管了，看下一例子：

运行代码

还是贴到左上角去！

既然这样，我们看看body的父元素html

运行代码

贴到左上角去……

运行代码

这个和body{position:relative;}一样是正上方，那html{position:absolute}大家应该能猜到吧！

运行代码

完了吗？！未完，我们还有两个特例没有试！