特别是在div的应用上更迷。
3 回答
已采纳
blovetu
TA贡献319条经验 获得超234个赞
position：absolute这个是绝对定位；
是相对于浏览器的定位。
比如：position：absolute；left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置。
position：relative是相对定位，是相对于前面的容器定位的。这个时候不能用top left在定位。应该用margin。
比如：<div class="1"></div><div class="2"></div>
你可以把相对定位当成是绝对定位父亲，那么position:relative天生可以限制position:absolute在left/top移动的能力。好像是如来的大手掌限制了孙猴子的筋斗云一样。
qq_非诚勿扰_3
TA贡献37条经验 获得超16个赞
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绝对定位和相对定位</title>
<style type="text/css">
body{
margin:0;
padding:0;
}
div{
width:15%;
border:#ccc solid 1px;
margin-bottom:100px;
margin-left:20px;
}
.absolute{
position: absolute;
}
.relative{
position: relative;
}
.float-left{
float:left;
}
.left{
left:10px;
}
.right{
right:0;
}
.overflow{
overflow:hidden;
}
</style>
</head>
<body>
<div>
<img alt="这是一张图片" src="board.jpg">什么都没有添加的情况下
</div>
<div>
<img alt="这是一张图片" src="board.jpg" class="relative left">图片添加了相对定位，父元素没有塌陷，因为其并没有脱离文档流，对其设置left是基于其本身位置的
</div>
<div>
<img alt="这是一张图片" src="board.jpg" class="absolute">图片添加了绝对定位，父元素高度塌陷了，跟浮动不同的是，绝对定位会遮住其他元素，相当于漂浮了
</div>
<div>
<img alt="这是一张图片" src="board.jpg" class="float-left">图片添加左浮动，同样是父元素塌陷，与上一个例子对比
</div>
<div>
<img alt="这是一张图片" src="board.jpg" class="float-left absolute">图片同时添加左浮动和绝对定位，可以看出浮动失效了
</div>
<div>
<img alt="这是一张图片" src="board.jpg" class="absolute left">图片添加了绝对定位，在设置left属性时是基于浏览器的位置
</div>
<div class="relative">
<img alt="这是一张图片" src="board.jpg" class="absolute left">图片添加了绝对定位，且父元素添加了相对定位，这时的left属性变成了相对于父元素的位置，也就是说相对定位会限制绝对定位
</div>
<div class="overflow">
<img alt="这是一张图片" src="board.jpg" class="absolute">图片添加了绝对定位，超出了父元素的范围，即使父元素设置了overflow:hidden，超出部分也会正常显示
</div>
<div class="overflow relative">
<img alt="这是一张图片" src="board.jpg" class="absolute">图片添加了绝对定位，超出了父元素的范围，父元素设置了overflow:hidden，如父元素设置了relative，超出部分会被切除
</div>
</body>
</html>
试试这个
刚毅87
TA贡献345条经验 获得超309个赞
position:relative
相对定位
定位的参考是基于它本身的位置
使用 top ，right ，bottom ，left 之前，我们首先需要给元素设置 position
否则不会产生任何效果;
相对定位的特性：
1.相对定位不会影响元素本身的特性
2.相对定位不会使元素脱离文档流，元素位置移动之后，原始位置会保留
3.如果没有定义偏移量，对于元素本身没有任何影响
4.设置相对定位会提升层级
绝对定位 position:absolute
1.参考的是离他最近已经定位的父元素，只要不是 static 就可以
2.绝对定位会使元素完全脱离文档流，
3.如果有定位父级发生了偏移，元素同样会随定位的父级发生偏移
4.相对定位一般配合绝对定位来使用
5.设置绝对定位会提升层级
- 3 回答
- 0 关注
- 1993 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消