                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)-升级版

Relative与Absolute组合使用

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

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

祈祈祈祈祷

2016-08-02

源自：初识HTML(5)+CSS(3)-升级版 13-9

关注问题我要回答

1333

操作

收起

4 回答

慕粉18226613694
2016-08-02

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

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

收起回答

祈祈祈祈祷提问者

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

2016-08-02 回复有任何疑惑可以回复我~

祈祈祈祈祷提问者
2016-08-02

<!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://img1.sycdn.imooc.com//541a7d8a00018cf102000200.jpg">
    <div id="box4">当我还是三年级的学生时是一个害羞的小女生。</div>
</div>
</body>
</html>