问答详情
源自:13-6 万事无绝对 -层模型之绝对定位

关于绝对定位的知识点有个不太懂

“相对于其最接近的一个具有定位属性的父包含块进行绝对定位”这句话是什么意思,有实例解释一下吗,谢谢

提问者:Otone 2018-07-02 12:04

个回答

  • _Henry_Lin_
    2018-07-02 16:11:38
    已采纳

    <!-- 

    解释代码如下:box1是box2的父类包含块(即box2是在box1里面的块元素),将box1定义position:relative, box2定义为 position:absolute, 则box2就可以根据box1进行绝对定位。

    box3和box4同理。

    -->

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>相对参照元素进行定位</title>
    <style type="text/css">
    div{border:2px red solid;}
    #box1{
        width:200px;
        height:200px;
        position:relative;   
    }
    #box2{
      position:absolute;
     top:20px;
     left:30px;
    }
    /*下面是任务部分*/
    #box3{
        width:200px;
        height:200px;
        position:relative;      
    }
    #box4{
        width:99%;
        position:absolute; 
        bottom:0px; 
    }
    </style>
    </head>

    <body>
    <div id="box1">
     <div id="box2">相对参照元素进行定位</div>
    </div>

    <h1>下面是任务部分</h1>
    <div id="box3">
        <img src="http://img.mukewang.com/541a7d8a00018cf102000200.jpg">
        <div id="box4">当我还是三年级的学生时是一个害羞的小女生。</div>
    </div>
    </body>
    </html>