关于absolute的参考点

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 吴晗君