Jquery 图像滑块的控制面板

我正在制作一个图像滑块，但现在我想在滑块底部添加一个控制栏 （见图）。控制栏需要更高的z索引，但如果我这样做

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

问题在于浏览器设置了整个主体的z索引，因此控制面板位于页面上所有其他项目的上方

有人能帮我解决这个问题吗

图像解释 灰色：边框
红色：图像
黑色：控制栏

在这里，尝试以下方法：

HTML:

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

JSFIDDLE

说明：

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

底部：0；左：0

将div从父div底部（

#images

）定位为0像素，从父div左侧定位为0像素。绝对位置元素相对于第一个父元素定位，该父元素的位置不是静态的。这里的第一个父元素是父div，它有一个

位置：relative

，因此它不是静态的，因此子div（#controls）将自己相对于父div进行定位，很好地位于底部