MDN绝对定位

资料

起因

在阅读资料时候因为原文不严谨，所以产生了疑问：

  • 如果是以body为参考点，那怎么会带上html呢？为什么会有个或呢？到body那里不就够了吗？遂决定去查阅一下到底是以什么为参考点。但是网上的统一说法和MDN那里说的一样。


    MDN的描述

    大众说法

    和MDN没什么区别，没有细究。就准备动手实验。

实验

  • 不给body设置relative，margin。参考点是页面左上角 。
    demo1

    demo1
  • 给body设置relative,margin。参考点是body框的左上角。
    demo2

    demo2
  • 给body设置margin,参考点是页面左上角。
    demo3

    demo3
  • 给div块设置relative,margin。参考点是div块左上角。
    demo4

    demo4

  • 对demo1审查元素


    对demo1审查元素
  • 刚开始做实验1和3的时候得到了结论：body在没有设置position的情况下，position:absolute的参考点是页面左上角（也就是MDN里说的根级容器）定位的。但是我在想，会不会是margin影响了实验呢？（因为学的东西太少了，所以会有各种问题..囧）

所以。

  • 本着高中玩儿过来的实验课教会我的条件对照和相互对照原则，做了实验2和4。
    通过实验2和4可以看到：对父容器设置margin，position:absolute定位的参考点并没有受到影响。
    得到结论：body在没有设置position的情况下，body内的元素若position:absolute，它的参考点是页面左上角（也就是MDN里说的根级容器）定位的。设置margin并不会对结论产生影响。
  • 貌似结论出来了诶...............哈哈哈哈。本人手很新新新新。如果有误请指正，不胜感激。

最后

                                                    by 吴晗君