页面中含有position属性的div的相对位置

只有当父节点中的position：relative，子节点的position: absolute。子节点才能通过top,bottom,left,right进行定位

<div style="float:left;position:relative;">
    <div style="float:left;position:absolute;"></div>
</div>
复制代码

当父节点中的position：absolute，子节点的position: absolute。此时子节点不能通过top,bottom,left,right进行定位，absolute属性失效

<div style="float:left;position:absolute;">
    //此div的position属性等于白写
    <div style="float:left;position:absolute;"></div>
</div>
复制代码

当出现一种情况，父节点必须利用position:absolute去匹配父节点的父节点的position：relative属性

<div style="float:left;position:relative;">
    <div style="float:left;position:absolute;">
        <div style="float:left;position:absolute;"></div>
    </div>
</div>
复制代码

此时的解决办法有两种
1.在子节点外套一层position:relative的div

<div style="float:left;position:relative;">
    <div style="float:left;position:absolute;">
        //套一层div
        <div style="float:left;position:relative;">
            <div style="float:left;position:absolute;"></div>
        </div> 
    </div>
</div>
复制代码

2.利用margin属性进行定位

tips:含border属性的div和不含border属性的div是在两个不同的水平面上的