0

我有两个箭头导航项目，我想左右浮动，它们绝对定位并且比页面上的所有内容都具有更高的 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;
}

发生的情况是应该向右浮动的块最终在左侧浮动块的顶部向左浮动。我尝试在浮动元素之后和容器 div 内添加清除修复，但无济于事。

4

7 回答 7

3

元素只有在flow中才能浮动。绝对定位的元素不在流中，因此不能浮动。尝试改用left&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;
}
于 2013-08-20T16:43:15.023 回答
1

我会用 left:0px 和 right: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;
}
于 2013-08-20T16:41:18.387 回答
1

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

#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;
                }
于 2013-08-20T17:01:52.103 回答
0

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

  #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;
        }
于 2013-08-20T16:42:47.543 回答
0

使用right:0;andleft:0;用于绝对定位的元素

于 2013-08-20T16:43:49.747 回答
0

你不需要position: absolute;在你的#prev 和#next 中，除非你想让它们堆叠在彼此之上。

于 2013-08-20T16:45:12.153 回答
0

我已经测试了你的代码，问题是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这意味着它将在右侧浮动。

于 2013-08-20T16:45:42.673 回答