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

求助 我的运行结果总是错的

我的运行结果是这样,文字不在图片里面,大神帮忙看下哪儿错了

/*下面是任务部分*/http://img.mukewang.com/5870605500018c4302600462.jpg

#box3{

    width:200px;

    height:200px;

    position:relative;       

}

#box4{

    width:200px;

    height:50px;

  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>


提问者:慕粉002007484 2017-01-07 11:29

个回答

  • 飘零花
    2017-01-09 21:48:52

    同学,打代码要严谨!我找到你的错误所在了,注意看这是你自己写的代码:

    #box3{

        width:200px;

        height:200px;

        position:relative;       

    }

    问题就出在这个relative前面的冒号上,你打成全角冒号了,所以这个position定为就没起作用,你把冒号换成半角的试试就知道了!

  • 你要好好的yy
    2017-01-08 23:33:06

    改top和left属性的px大小啊,调整到合适就好了


  • 你要好好的yy
    2017-01-07 11:58:07

    <!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;

    top:163px;

    }

    </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>