美文网首页
position:absolute 的定位是相对body或父元素

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

作者: K_Olivia | 来源:发表于2018-10-05 17:20 被阅读0次

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>

相关文章

网友评论

      本文标题:position:absolute 的定位是相对body或父元素

      本文链接:https://www.haomeiwen.com/subject/ftvqaftx.html