html里面定位的问题-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

html里面定位的问题

杨冬芳 2016-06-03 10:33:13 1054

假如在div1,第div2,div3里面,div1是position:relative,第div2是postion:absolute,div3是position:absolute,我要是让div2在div1里面,div3在div2里面,此时的div3是根据div2还是div1来定位的呢????想知道下原因

分享到
取消 提交回答
全部回答(1)
  • 杨冬芳
    2019-07-17 19:26:11

    根据你的描述,结构应该是这样子的:

    <div class="div1">
        <div class="div2">
            <div class="div3">
    
            </div>
        </div>
    </div>
    

    首先说你的问题的结果:div3是相对于2进行定位的。原因如下:

    position一般有4个值:static, relative, absolute, fixed;

    1. static是元素的默认值,即不显式设置position时的值;
    2. relative是相对DOM元素自己的位置进行定位的;
    3. absolute是相对于挨着DOM元素最近的且position的值不为static的父级(祖先)元素进行定位的,若所有的祖先元素都没有设置position,则按照body进行定位。比如上面的例子中,div3的祖先元素从近往远分别是:div2,div1。div2的position值是absolute,则div3就按照div2的左上角进行定位;假如没有设置div2的position,那么就接着往外找,看看div1有没有,一直找到body为止;
    4. fixed是相对于可视窗口进行定位的。
    0 0
云计算
使用钉钉扫一扫加入圈子
+ 订阅

时时分享云计算技术内容,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。

推荐文章