为了账号安全,请及时绑定邮箱和手机立即绑定

定位问题,yun

<!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;
    left:20px;
    top:20px;      
}
#box2{
     position:absolute;
    top:20px;
    left:30px;
          
}
/*下面是任务部分*/
#box3{
    position:absolute;
    bottom:30px;
    left:0;
   
           
}
#box4{
    width:99%;
         
    
    width:200px;
    height:200px;
    position:relative;
    left:20px;
    top:20px;
}
</style>
</head>

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

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

</body>
</html>

box1中的relative 对box3中的absolute产生什么影响

正在回答

3 回答

亲,box3使用相对定位relative。box1也是相对定位relative,相对定位之间不影响吧。

即使box3使用绝对定位,也是必须要box3的父辈元素里面有相对定位才影响。

而box1不是box3的父辈元素。所以无论如何,他们没有任何关系,没有影响

0 回复 有任何疑惑可以回复我~

what is that ? i don't understand your description,   please help me!

0 回复 有任何疑惑可以回复我~

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

    

}

</style>

</head>


<body>

<div id="box1">

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

</div>


<h1>下面是任务部分</h1>

<div id="box3">

    <img src="http://img1.sycdn.imooc.com//541a7d8a00018cf102000200.jpg">

    <div id="box4">当我还是三年级的学生时是一个害羞的小女生。</div>

</div>

</body>

</html>



0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
初识HTML(5)+CSS(3)-升级版
  • 参与学习       1225798    人
  • 解答问题       18234    个

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

进入课程

定位问题,yun

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信