关于CSS定位position: absolute;与position:relative的问题,求大神指教。

平凡__
  • 330

我把.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>
回复
阅读 2.9k
3 个回答
安歌
  • 6.9k
✓ 已被采纳

其实题主给的例子,存在很多个值得注意的问题,不过先回答关键,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 ,里面有一块专门讲到你碰到的这个问题,应该会对你有帮助。 有其他问题也可以继续交流。

定位参考元素,参考位置发生了变化

MinyaChan
  • 270

如果你把float:left和clear:both删掉就和代码一的效果一样了。
因为你使用了float,他就会浮动,但是你所给出的位置并不足够他浮动,为什么会出现上面的40px呢,我认为是这样子的。
你的a标签,使用了display:block;和position:relative。
首先解释一样display:block;你把一个流状元素a标签转为了块级元素,块级元素的特点就是即使宽度没有一行,他也会强制换行,占满一行。
第二个是position:relative ,这个是相对定位,他和absolute和fixed不一样,他不回脱离文档流,虽然也浮动了,但是原来的位置还是会占据着,只是你看不到而已。

你设置了你的a标签高度为40px,而你只是让他relative的浮动,所以原来的位置也占据着,这才是为什么会空出了40px高度的原因。

另外,你的css...讲真我快看不下去,强迫症的人都喜欢用csscomb,建议你去下载这个插件,这样子会方便看很多~

宣传栏