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

为什么我的文字显示在图片的下面而不是里面

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

    left:0;

}

</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-10-28 17:34

个回答

  • 停不下来啊
    2016-10-28 17:44:33
    已采纳

    #box4{

        width:99%;

      position:absolute; 

        bottom:0;

        left:0;

    }

    width:99% 去掉

  • 懵逼的我
    2016-11-03 18:14:14

        bottom:0;

    冒号错了!

    心累,忘采纳

  • 停不下来啊
    2016-10-28 17:45:15

    #box3{

        width:200px;

        height:200px;

        position:relative;     

    }

    #box4{

        width:99%;

      position:absolute;

    bottom:0;

        

    }