Relative与Absolute组合使用

来源:13-9 Relative与Absolute组合使用

祈祈祈祈祷

2016-08-02 21:34

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

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

写回答 关注

4回答

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

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

    祈祈祈祈祷

    好吧,谢谢。还以为我发现了惊天大法

    2016-08-02 22:43:00

    共 1 条回复 >

  • 祈祈祈祈祷
    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 22:16:59

    共 1 条回复 >

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

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

    祈祈祈祈祷

    我贴了代码,请看下麻烦你了

    2016-08-02 22:17:18

    共 2 条回复 >

初识HTML(5)+CSS(3)-升级版

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

1225812 学习 · 18234 问题

查看课程

相似问题