开发者社区> 问答> 正文

html里面定位的问题

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

展开
收起
杨冬芳 2016-06-03 10:33:13 1609 0
1 条回答
写回答
取消 提交回答
  • IT从业

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

    <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是相对于可视窗口进行定位的。
    2019-07-17 19:26:11
    赞同 展开评论 打赏
问答标签:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
《零基础HTML入门教程》 立即下载
天猫 HTML5 互动技术实践 立即下载
天猫HTML5互动技术实践 立即下载