关于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 吴晗君
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,796评论 1 92
  • CSS的position总是属性很容易让人弄混~ 为了仔细区别它们,所以今天总结一下CSS的position属性~...
    fehysunny阅读 2,956评论 0 7
  • 刚刚学习了定位,一开始还是比较晕的,特别是关于里面的各种相对位置,不知道它们的坐标具体是怎么算的。所以这里特别的记...
    婷楼沐熙阅读 1,799评论 0 3
  • 各种纯css图标 CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出。直接用CSS3画出这些图形,要比...
    剑残阅读 9,666评论 0 8
  • 学习建议 定位、浮动是 CSS 核心知识点,必须熟练掌握。 1.文档流的概念指什么?有哪种方式可以让元素脱离文档流...
    饥人谷_任磊阅读 1,115评论 0 3