首页 > html里面定位的问题

html里面定位的问题

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


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

html<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是相对于可视窗口进行定位的。


实际情况是div2是不会在div1里面的,因为你div2用的是绝对定位,除非你的绝对定位的位置确实是在div1的所在位置里面。然而div3却是在div2里面,因为你是直接写在里面的,并且div2是绝对定位。看下这段代码就知道了
<!DOCTYPE html>
<html>
<head></head>
<body>





</body>
</html>


哦,No,我一直以为absolute是相对于relative定位的,我错了


相对于div2,绝对定位相对于最近的已定位的祖先元素,如果没有就相对于body

【热门文章】
【热门文章】