关于CSS定位position: absolute;与position:relative的问题，求大神指教。
问题描述
我把.play的position: relative;去掉并且将.prev_datu里面的position: absolute;改成了position: relative;后.prev_datu的顶部就莫名其秒的下向移了40像素；这个是怎么会事呀。求大神帮解析一下。我在百度里面搜了半天也没明白，为什么会这样；
代码1。这个是我要的正常效果；
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>轮播图片效果</title>
<style>
*{
margin: 0px;
padding: 0px;
list-style-type: none;
}
.play{
width: 300px;
height: 600px;
margin: 20px auto;
background-color: #993322;
position: relative;
/* opacity: 0.5;
filter:alpha(opacity=50); */
}
.big_pic{
width: 300px;
height: 400px;
background-color: #447722;
}
/*左右箭头*/
.big_pic .prev{
width: 40px;
height: 40px;
display: block;
background-color: #001188;
position: relative;
left: 10px;
top:180px;
float: left;
color: #fff;
text-align: center;
line-height: 40px;
z-index: 10;
}
.big_pic .next{
width: 40px;
height: 40px;
display: block;
background-color: #001188;
color: #fff;
line-height: 40px;
text-align: center;
position: relative;
top: 180px;
right:10px;
float: right;
z-index: 10;
}
/* 透明遮罩开始 */
.big_pic .prev_datu{
width: 150px;
height: 400px;
display: block;
background-color: #993322;
opacity: 0.3;
filter: alpha(opacity=30);
position: absolute;
top: 0px;
left: 0px;
float: left;
clear: both;
padding: 0px;
}
</style>
</head>
<body>
<div class="play" id="playimages">
<ul class="big_pic">
<a class="prev"><</a>
<a class="next">></a>
<a class="prev_datu"></a>
<a class="next_datu"></a>
</ul>
</div>
</body>
</html>代码2，这里我把.play的position: relative;去掉并且将.prev_datu里面的position: absolute;改成了position: relative;后.prev_datu的顶部就莫名其秒的下向移了40像素；这个是怎么会事呀。求大神帮解析一下。我在百度里面搜了半天也没明白，为什么会这样；
下面的出现位置后的代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>轮播图片效果</title>
<style>
*{
margin: 0px;
padding: 0px;
list-style-type: none;
}
.play{
width: 300px;
height: 600px;
margin: 20px auto;
background-color: #993322;
/* opacity: 0.5;
filter:alpha(opacity=50); */
}
.big_pic{
width: 300px;
height: 400px;
background-color: #447722;
}
/*左右箭头*/
.big_pic .prev{
width: 40px;
height: 40px;
display: block;
background-color: #001188;
position: relative;
left: 10px;
top:180px;
float: left;
color: #fff;
text-align: center;
line-height: 40px;
z-index: 10;
}
.big_pic .next{
width: 40px;
height: 40px;
display: block;
background-color: #001188;
color: #fff;
line-height: 40px;
text-align: center;
position: relative;
top: 180px;
right:10px;
float: right;
z-index: 10;
}
/* 透明遮罩开始 */
.big_pic .prev_datu{
width: 150px;
height: 400px;
display: block;
background-color: #993322;
opacity: 0.3;
filter: alpha(opacity=30);
position: relative;
top: 0px;
left: 0px;
float: left;
clear: both;
padding: 0px;
}
</style>
</head>
<body>
<div class="play" id="playimages">
<ul class="big_pic">
<a class="prev"><</a>
<a class="next">></a>
<a class="prev_datu"></a>
<a class="next_datu"></a>
</ul>
</div>
</body>
</html>其实题主给的例子，存在很多个值得注意的问题，不过先回答关键，40px的偏移值是来源于.prev_datu的clear:both属性，也就是上面两个浮动元素中高度更大的一个的高度值，为了验证这个问题，题主不妨可以开firebug或者chrome的调试器，或者直接更改.prev或者.next的高度，就可以发现:
1.prev_datu的顶部偏移值随着.prev和.next中高度值较大的元素而增加。
2.prev_datu的去掉clear属性则不会有偏移值
为什么会出现这种情况呢？这个就要谈到clear属性清除浮动的原理：
clear:both Requires that the top border edge of the box be below the
bottom outer edge of any right-floating and left-floating boxes that
resulted from elements earlier in the source document
以上是w3c文档上关于clear:both的描述，大致意思就是：
clear清除浮动的原理是：让添加了clear属性的那个元素的top边缘在某侧或者两侧（看设置的值是left right还是both）浮动元素的底边距之下。
（本例子中就是.prev_datu的top值被设置在.prev和.next的bottom下方）
所以题主的问题就可以解释了，那为什么第一种情况不会有偏移呢？很简单，第一种.prev有position:absolute属性，绝对定位会使元素完全脱离文档流，自然不受影响。 关于浮动和绝对定位的更详细介绍，题主可以看看我写的这篇总结 深入解析float ，里面有一块专门讲到你碰到的这个问题，应该会对你有帮助。 有其他问题也可以继续交流。
这篇关于关于CSS定位position: absolute;与position:relative的问题，求大神指教。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
