css的相对定位有关问题，为什么div3的文字会在红色正方形外面？而不是里边呢
css的相对定位问题，为什么div3的文字会在红色正方形外面？而不是里边呢？
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css" >
body{
margin:0px;
padding:0px;
}
#container{
width:300px;
height:300px;
background-color:#999999;
margin:30px 0px 0px 30px;
}
.common{
float:left;
}
.div1{
width:100px;
height:100px;
background-color:#CCFF66;
}
.div2{
width:100px;
height:100px;
background-color:#33FFFF;
}
.div3{
width:100px;
height:100px;
background-color:#FF3399;
position:relative;
top:150px;
}
</style>
</head>
<body>
<div id="container">
<div class="div1 common">div1</div>
<div class="div2 common">div2</div>
<div class="div3"><span>div3</span></div>
</div>
</body>
</html>
为什么div3的文字会在红色正方形外面？而不是里边呢？
------解决方案--------------------
受前面两个float元素的影响，你看下如果把div3的高度添加到120px，就会被包进去了。
这个应该是由于relative和float的它们俩的性质引起的，这个原因具体怎么解释，得是要好好想一想的。
你可以去掉前面的两个float，或者给div3添加一个clear:left/both，应该都可以看到效果的。
具体原因还得是，浏览器对relative的解释，根本原因得是要查下资料，研究研究了。
本以为对定位认识已经不错了，这里又学到了新的东西了。
这个必须得感谢楼主啊！！
------解决方案--------------------
你说的这个，可以靠绝对定位实现的。
相对定位的话，受到很多东西的影响，比如float,margin,pandding等。
绝对定位的话，就可以不受这些东西影响了。
你把灰色的div设置一个relative，然后把div3设置absolute，top:150px;应该就是你要的效果了。
试试吧。
------解决方案--------------------
这是在 IE6 中的效果
这是在 360急速 中的效果
IE6 中
div3.top 之所以要为 50px，是因为他并没有认为 div1、div2 脱离了文档流。所以 top 是从 div1 的底部算起的
------解决方案--------------------
解决的办法到是真有不少 。楼上的也说了不少了，另外还有 增加 overflow:hidden同时定义 left:0 或者 在给 里面的 span absolute。等等 导致的原因我觉得 3楼 是正解啊 。受到了 float 的影响了。 说真的 这个问题 还真没有想过 因为 我个人的 习惯是 用了 relative 之后才会用 absolute 。呵呵 学习了 。
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css" >
body{
margin:0px;
padding:0px;
}
#container{
width:300px;
height:300px;
background-color:#999999;
margin:30px 0px 0px 30px;
}
.common{
float:left;
}
.div1{
width:100px;
height:100px;
background-color:#CCFF66;
}
.div2{
width:100px;
height:100px;
background-color:#33FFFF;
}
.div3{
width:100px;
height:100px;
background-color:#FF3399;
position:relative;
top:150px;
}
</style>
</head>
<body>
<div id="container">
<div class="div1 common">div1</div>
<div class="div2 common">div2</div>
<div class="div3"><span>div3</span></div>
</div>
</body>
</html>
为什么div3的文字会在红色正方形外面？而不是里边呢？
------解决方案--------------------
受前面两个float元素的影响，你看下如果把div3的高度添加到120px，就会被包进去了。
这个应该是由于relative和float的它们俩的性质引起的，这个原因具体怎么解释，得是要好好想一想的。
你可以去掉前面的两个float，或者给div3添加一个clear:left/both，应该都可以看到效果的。
具体原因还得是，浏览器对relative的解释，根本原因得是要查下资料，研究研究了。
本以为对定位认识已经不错了，这里又学到了新的东西了。
这个必须得感谢楼主啊！！
------解决方案--------------------
你说的这个，可以靠绝对定位实现的。
相对定位的话，受到很多东西的影响，比如float,margin,pandding等。
绝对定位的话，就可以不受这些东西影响了。
你把灰色的div设置一个relative，然后把div3设置absolute，top:150px;应该就是你要的效果了。
试试吧。
------解决方案--------------------
这是在 IE6 中的效果
.div3{
width:100px;
height:100px;
background-color:#FF3399;
position:relative;
top:50px;
}
这是在 360急速 中的效果
.div3{
width:100px;
height:100px;
background-color:#FF3399;
position:relative;
top:150px;
}
.div3 span {
position:absolute;
top:0px;
left:0px;
}
IE6 中
div3.top 之所以要为 50px，是因为他并没有认为 div1、div2 脱离了文档流。所以 top 是从 div1 的底部算起的
------解决方案--------------------
解决的办法到是真有不少 。楼上的也说了不少了，另外还有 增加 overflow:hidden同时定义 left:0 或者 在给 里面的 span absolute。等等 导致的原因我觉得 3楼 是正解啊 。受到了 float 的影响了。 说真的 这个问题 还真没有想过 因为 我个人的 习惯是 用了 relative 之后才会用 absolute 。呵呵 学习了 。