问答详情
源自:13-9 Relative与Absolute组合使用

Relative与Absolute组合使用

我设置的时候没有按照文章的内容设置,而是给box3设置了绝对定位,然后给box4设置了相对定位。为什么也可以?不是说了

Relative与Absolute组合使用不是应该是参照定位的元素必须是相对定位元素的父元素么

提问者:祈祈祈祈祷 2016-08-02 21:34

个回答

  • 慕粉18226613694
    2016-08-02 22:36:27

    这里和box3的position并无关系  是你的bottom的设置相对于body的位置,50px正好在哪里,因为box4中的position是relative所以并不会造成覆盖

  • 祈祈祈祈祷
    2016-08-02 22:16:27

    <!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:absolute;       
    }
    #box4{
        width:99%;
         position:relative;    
        bottom:50px;
        
    }
    </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>

    这个是我刚试的还是可以呀

  • 简单微笑
    2016-08-02 22:01:29

    我设置的box3绝对定位,box4相对定位,显示不正确,但是box3和box4都设置为绝对位置就正确

  • 剪刀用来剪东西
    2016-08-02 21:56:38

    我试了给box3设置了绝对定位,给box4设置了相对定位,显示的并不可以。。。