position:absolute 的定位是相对body或父元素？

position:absolute 是相对于它所有父元素中第一个有position:absolute或者position:relative属性的父级元素，如果都没有，就是相对于body.

  • 例如：
    abDiv 外层的div没有定义position,所以abDiv是相对body定位的
<body>
    <div>
        <div id="abDiv" style="width:100px; height:100px; position:absolut;left:20px;top:10px;">
        </div>
     </div>
</body>
  • 例如
    由于parent1Div没有定义position,parent2Div定义了position,所以abDiv相对于parent2Div 定位
<body>
    <div id="parent2Div" style="width:200px;height:200px;background-color:red;position:absolute;">
        <div id="parent1Div" style="width:100px;height:100px;background-color:blue;">
            <div id="abDiv" style="width:50px;height:50px;background-color:yellow;position:absolute;left:20px;top:10px;"></div>
        </div>
    </div>
</body>
  • 例如
    abDiv相对parent1Div定位
<body>
    <div id="parent2Div" style="width:200px;height:200px;background-color:red;position:absolute;">
        <div  id="parent1Div"  style="width:100px;height:100px;background-color:blue;position:relative;">
            <div  id="abDiv" style="width:50px;height:50px;background-color:yellow;position:absolute;left:20px;top:10px;"></div>
        </div>
    </div>
</body>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容