问题产生
在使用relative和absolute布局时，我们很难理解他们深层次的区别。
问题详解
relative：
w3c解释：生成相对定位的元素，相对于其正常位置进行定位。
其实是相当于对父容器里的对象进行定位。
注：
1. relative参照父级元素原始点，无父级以body原始点为原始点
2. 父级中有padding，margin等时，原始点参照父级内容区原始点定位
absolute：
w3c解释：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
其实就是相当于对父容器进行定位。
注：
1. 用了abolute属性，原有float属性将失效；
2. 网页居中使用absolute时，容易出错，因为居中时分辨率大小是自适应的，而absolute会以浏览器
左上角为原点，不会因为分辨率变化而变化，很多人在这个问题上出错。
图像说明：
box2使用的是relative，所以box2距box1里面的文字20px；box2使用的是absolute，所以
box2距box1 20px，和里面的文字没有关系。其实这里还有一个问题，当div里面的内容是
非汉字时，里面的内容不会换行，我觉得应该是浏览器把一串英文字符当成一个字符了。
有懂得记得告诉我一下哈。
代码说明
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.s1{
position:relative;
width:100px;
height:70px;
background-color: pink;
}
.s2{
position:relative;
width:100px;
height:70px;
left:50px;
top:20px;
background-color: red;
}
.s3{
position:absolute;
width:100px;
height:70px;
left:50px;
top:20px;
background-color: green;
}
</style>
</head>
<body>
<div class="s1">
这是一个特别大的box1
<div class="s2">
这是一个特别大的box2
<div class="s3">
这是一个特别大的box3
</div>
</div>
</div>
</body>
</html>
2188
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
