jquery - 图像 slider 的控制面板

Question

我正在制作一个图像 slider ，但现在我想在 slider 底部添加一个控制栏(见图)。控制栏需要比图像更高的 z-index，但如果我这样做，

#controls{
 position:fixed;
 z-index:2
}

问题在于浏览器设置了整个主体的 z-index，因此控制面板位于页面上所有其他元素之上。

有人可以帮我解决这个问题吗？

图片说明灰色:边框
红色:图片
黑色:控制条

Answer 1

在这里，试试这个:

HTML:

<div id="images">
    Images
    <div id="controls">
        Controls
    </div>
</div>

CSS

#images {
    height: 400px;
    background: red;
    position: relative; /* This works */
}

#controls {
    height: 50px;
    background: black;
    color: #fff;
    width: 100%;

    position: absolute; /* This works */
    bottom: 0; 
    left: 0;
}

JSFIDDLE

http://jsfiddle.net/Lw5syvbf/

解释:

底部:0； left: 0 将 div 定位为距父 div 底部 0 像素(#images)和距父 div 左侧 0 像素。绝对位置元素相对于具有非静态位置的第一个父元素定位。这里的第一个父元素是 parent-div 有一个 position: relative，因此它不是静态的，因此 child-div(#controls) 将相对于 parent-div 定位自己，恰好在底端。