Question

我有两个箭头导航项，我想左右浮动，它们绝对定位，并且z-index比页面上的所有内容都高。但是我有一个问题。

<div id="slider-nav">
<a href="#" id="next"></a>
<a href="#" id="prev"></a>
</div>

然后我有CSS，我希望这两个项目向左或向右浮动。

#next {
    display: block;
    width: 8px;
    height: 12px;
    background-image:url(images/next.png);
    z-index: 999;
    position: absolute;
    float: right;
}

#prev {
    display: block;
    width: 8px;
    height: 12px;
    background-image:url(images/prev.png);
    z-index: 999;
    position: absolute;
    float: left;
}

#slider-nav {
    width: 100%;
    height: 12px;
    position: absolute;
    z-index: 100;
}

发生的情况是，应该向右浮动的块最终向左漂浮在左浮动块的顶部。我尝试在浮动元素之后添加clear fix并在容器div中添加无效。

Answer 1

元素只有在 flow 中才能浮动。绝对定位的元素不在流动中，因此不能浮动。尝试使用left＆amp; right定位。

#next {
    display: block;
    width: 8px;
    height: 12px;
    background-image:url(images/next.png);
    z-index: 999;
    position: absolute;
    right: 0;
}

#prev {
    display: block;
    width: 8px;
    height: 12px;
    background-image:url(images/prev.png);
    z-index: 999;
    position: absolute;
    left: 0;
}

Answer 2

我会用左设置：0px右：0px css参数

并设置了像80px http://jsfiddle.net/Hfc5r/3/

这样的宽度

#next {
    display: block;
    width: 80px;
    height: 12px;
    background-image:url(images/next.png);
    z-index: 999;
    position: absolute;
    right: 0px;
}
#prev {
    display: block;
    width: 80px;
    height: 12px;
    background-image:url(images/prev.png);
    z-index: 999;
    position: absolute;
    left: 0px;
}
#slider-nav {
    width: 100%;
    height: 12px;
    position: absolute;
    z-index: 100;
}

Answer 3

你可以通过定位或左/右属性来解决这个问题。在CSS代码中，将位置修改为相对而不是绝对。这应该可以解决您的问题。我还改变了内联块旁边的显示。

#next {
        display:inline-block;
        width: 8px;
        height: 12px;
        background-image:url(images/next.png);
        z-index: 999;
        position: relative;
        float: right;
    }
    #prev {
        display: block;
        width: 8px;
        height: 12px;
        background-image:url(images/prev.png);
        z-index: 999;
        position: relative;
        float: left;
    }
               #slider-nav {
                border:1px solid red;
                    height: 12px;
                    width:100%;
                    position: absolute;
                    z-index: 100;
                }

Answer 4

一旦将元素置于绝对位置，就不需要浮动元素：

  #next {
            display: block;
            width: 8px;
            height: 12px;
            background-image:url(images/next.png);
            z-index: 999;
            position: absolute;
            right: 0;
        }
        #prev {
            display: block;
            width: 8px;
            height: 12px;
            background-image:url(images/prev.png);
            z-index: 999;
            position: absolute;
            left: 0;
        }

Answer 5

使用right:0;和left:0;作为绝对定位元素

Answer 6

你的#prev和#next中不需要position: absolute;，除非你希望它们叠加在彼此的上方。

Answer 7

我已经测试了您的代码，问题是position: absolute;使其浮动整个文档。您可以考虑使用类似left: 10px的内容，这样会创建margin-left: 10px之类的内容。使用此代码：

    #next {
        display: block;
        width: 8px;
        height: 12px;
        background-image:url(images/next.png);
        z-index: 999;
        position: absolute;
        float: right;
    }
    #prev {
        display: block;
        width: 8px;
        height: 12px;
        background-image:url(images/prev.png);
        z-index: 999;
        position: absolute;
        right: 30px;
        float: left;
    }
               #slider-nav {
                    width: 100%;
                    height: 12px;
                    position: absolute;
                    z-index: 100;
                }

如果你想将它漂浮到右边，你可以使用它：right: 10px这将使它在右侧漂浮，只有10px的边距。

修改：我的代码正在使用right: 10px，这意味着它会浮动在右侧。

浮右是浮左？

7 个答案: