我把.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>如果你把float：left和clear：both删掉就和代码一的效果一样了。
因为你使用了float，他就会浮动，但是你所给出的位置并不足够他浮动，为什么会出现上面的40px呢，我认为是这样子的。
你的a标签，使用了display：block；和position：relative。
首先解释一样display：block；你把一个流状元素a标签转为了块级元素，块级元素的特点就是即使宽度没有一行，他也会强制换行，占满一行。
第二个是position：relative ，这个是相对定位，他和absolute和fixed不一样，他不回脱离文档流，虽然也浮动了，但是原来的位置还是会占据着，只是你看不到而已。
你设置了你的a标签高度为40px，而你只是让他relative的浮动，所以原来的位置也占据着，这才是为什么会空出了40px高度的原因。
另外，你的css...讲真我快看不下去，强迫症的人都喜欢用csscomb，建议你去下载这个插件，这样子会方便看很多~
定位参考元素，参考位置发生了变化
其实题主给的例子，存在很多个值得注意的问题，不过先回答关键，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 ，里面有一块专门讲到你碰到的这个问题，应该会对你有帮助。 有其他问题也可以继续交流。