sinat_28050007 2015-10-02 03:57 采纳率: 57.1%
浏览 1734
已采纳

关于绝对定位不设置TRBL默认定位问题

最近遇到一个元素设置绝对定位且不设置TRBL的问题,查了很多资料解答不了~~~~拜托各位大神解决一下~~~~
代码很简单,首先:

 <style type="text/css">
    *{ padding:0px; margin:0px;}
    #a{ border:4px solid #f00; width:50px; height:50px; position:absolute;}
    #b{ border:2px solid #00f; width:50px; height:50px;margin-top:100px;}
    #c{ border:4px solid #0f0; width:50px; height:50px; }
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</body>

浏览器显示如下:图片说明
可以很清楚地看到,方框b设置了margin-top,方框a就被拖了下来,方框a为什么会被拖下来呢?我觉得方框b的位置变动应该不会对方框a造成什么影响啊?
之后为了印证我的猜想,我又改了一下代码试了一下。改动不大,就是方框a取消绝对定位,方框b绝对定位,方框c设置margin-top,结果正如我所料的一样:图片说明
方框c的位置变动并未对方框b造成什么影响!
那我想问的是,为什么a设置绝对定位,b设置margin-top,方框a就会被拖下来啊??

  • 写回答

1条回答 默认 最新

  • 兔子饿了 2015-10-12 13:31
    关注

    事实上你拖动的是整个body而不是div#a

    首先说一下margin,正常的文档流里,margin是距离周围元素多少距离,而不是距离父级边界多少距离

    举个例子

    <div> 1 </div>
    <div>
        <div style="height:100px; margin:100px;"> 2 </div>
    </div>
    <div> 3 </div>
    

    如果我现在问你,div1div3相距多少?

    当然你会告诉我,这还不简单,div2height100px,上下margin100px,一共300啊。

    好的那我再问你,div2的父级高度是多少?

    这个时候就不是300px了,正常的文档流里margin不会把父级撑开!

    所以div2的父级还是100px,虽然div2并没有100px的上下margin,但是它也是从div2所在位置开始的,也就是说整个父级被div2拖下来了

    图片说明

    好的现在回来回答你的问题,首先第一个情况,说了嘛,margin不会把父级也就是body撑开,所以bodydiv#b都往下移了100px,你问我div#a呢?他被加了绝对定位已经脱离文档流了,所以对div#b没有影响。

    图片说明

    然后第二个情况,呃......好像没什么好解释的了。

    展开全部

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
编辑
预览

报告相同问题?

悬赏问题

  • ¥15 vue请求不到数据,返回状态200,数据为html
  • ¥15 访问url时不会自动调用其 Servlet的doGet()
  • ¥15 用白鹭引擎开发棋牌游戏的前端为什么这么难找
  • ¥15 MATLAB解决问题
  • ¥35 哪位专业人士知道这是什么原件吗?哪里可以买到?
  • ¥15 关于#c##的问题:treenode反序列化后获取不到上一节点和下一节点,Fullpath和Handle报错
  • ¥15 一部手机能否同时用不同的app进入不同的直播间?
  • ¥20 输入import torch显示Intel MKL FATAL ERROR,系统驱动1%,: Cannot load mkl_intel_thread.dll.
  • ¥15 点云密度大则包围盒小
  • ¥15 nginx使用nfs进行服务器的数据共享
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部