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

relative和absolute运用

<!DOCTYPE HTML>

<html>

<head>

<title>相对参照元素进行定位</title>

div{border:2px red solid;}

#box1,#box2,h1{

margin-left:0px;

margin-top:0px;

}

#box1{

width:200px;

height:200px;

position:relative;

}

#box2{

position:absolute;

top:20px;

left:30px;

}

/*下面是任务部分*/

#box3{

height:200px;

width:200px;

position:relative;

}

#box4{

width:99%;

position:absolute;

bottom:0;

left:0px;

}

</style>

</head>

<body>

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

</div>

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

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

</div>

</body>

</html>为什么box3要用relative,box4相对于父级绝对定位吗，那现在box3已经是box4的父级了啊，为什么还要用relative

慕田峪9304305

2018-04-17

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

关注问题我要回答

1358

操作

收起

4 回答

慕码人hello_world 回答被采纳 +2 积分
2018-04-19

首先明确绝对定位：想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

这里“定位属性”重点，如果box3不加position:relative使box3具有定位属性的话，那么box4的绝对定位就会相对于body元素去定位了。

然后我又想为什么box3非要用relative相对定位呢？用absolute绝对定位行不行？经过测试发现也可以。也能够实现box4相对于box3的相对定位。

那么我又考虑到，用relative对box3进行相对定位一定是有原因的。经过研究我发现，如果用absolute对box3进行相对定位的话，box3会从文档流中脱离出来，造成后面的内容混乱,box3后面的内容跑到box3前面（我在box3前后加了一大段文字用来测试），因为absolute决定定位的特性就是会脱离文档流。

而relative相对定位的一大特性就是“初始位置保持不变”，不会造成后面内容的混乱。

说的有点乱，你可以把我代码中box3那段relative删除，再换成absolute分别看一下效果就了解了，哪里有问题我们继续讨论

<!DOCTYPE HTML>

<html>

<head>

<title>相对参照元素进行定位</title>

div{border:2px red solid;}

#box1{

width:200px;

height:200px;

position:relative;

}