控制面板的图像滑块

Question

我正在制作图像滑块，但现在我想在滑块底部添加一个控制栏 （见图）。控制栏需要更高的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/

<强>解释

bottom: 0; left: 0定位父div（#images）底部的div 0像素和parent-div左侧的0像素。绝对位置元素相对于具有静态位置的第一父元素定位。这里第一个父元素是parent-div有一个position: relative，因此它不是静态的，因此child-div（#controls）将相对于parent-div定位自己，很好地位于底部。