美文网首页
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