relative和absolute运用
慕田峪9304305
2018-04-17 20:59
<!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,#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="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>为什么box3要用relative,box4相对于父级绝对定位吗，那现在box3已经是box4的父级了啊，为什么还要用relative
4回答
-
- 慕码人hello_world
- 2018-04-19 17:11:38
首先明确绝对定位：想为元素设置层模型中的绝对定位，需要设置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>
<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>
1234123412341234123412341234132
<div id="box3">
<img src="http://img.mukewang.com/541a7d8a00018cf102000200.jpg">
<div id="box4">当我还是三年级的学生时是一个害羞的小女生。</div>
</div>
asdfasdfasdfasdfasdfasdfasdfa
</body>
</html>
-
- 慕仰000596
- 2018-04-17 22:27:23
一父一子
-
- qq_早安_10
- 2018-04-17 21:43:44
子绝父相，儿子绝对定位，父亲就要相对定位，不然儿子就会参照浏览器进行定位
-
- smartzhao
- 2018-04-17 21:25:02
box3是父级，所以要设置一个参照定位position:relative，意思就是有人要参照你的定位了
初识HTML(5)+CSS(3)-升级版
1225293 学习 · 18230 问题
相似问题