jquery - 幻灯片图像显示在模态窗口前面 - 使用 jsfiddle 更新

Question

有点卡在这里。

根据 Hanish 反馈 - 我创建了一个 Jsfiddle 来复制我面临的问题

http://jsfiddle.net/BY4fu/10/

如果有人可以帮助我调试，将不胜感激

我正在为幻灯片使用以下插件

http://jquery.malsup.com/cycle/basic.html

现在在同一页面上，我在模式窗口中显示文本 - 当用户单击某些链接时。这是我用于模态窗口的插件

http://rmcreative.ru/playground/modals_plugin/demo.html

现在的问题是 - 当模式窗口打开时 - 幻灯片中的图像位于模式窗口的顶部而不是后面

根据 dalefrench 的反馈，我尝试使用 z-index - 但没有运气

.modal {

z-index:1000;
background: #fff;
width: 600px;
margin: 20px auto;
border-radius: 30px;
border: 6px solid #000;
padding: 20px;  
text-align:justify;

}

.slideshow img { padding:5px; background-color:#000; z-index:10; }

感谢您的宝贵时间 - 非常感谢

Answer 1

Z-index 将助您一臂之力。还要检查您的模态位置是否固定，或者模态是否位于位置固定的元素内。如果是这种情况，请将模态的位置设置为默认位置。有关 Z-index 的更多信息，请查看此 链接

Answer 2

尝试给你的 .slideshow 元素一个 position:relative 的位置值，对于 .modal 也是如此。然后给 .slideshow 元素一个 z-index: -1 值。

更新了小提琴：http: //jsfiddle.net/BY4fu/6/

.slideshow {
    height: 125px;
    width: 232px;
    margin-left:20px;
    position: relative;
    z-index: -1;
}

 .modal {
    z-index:1000;
    background: #fff;
    width: 300px;
    margin: 20px auto;
    border-radius: 30px;
    border: 6px solid #000;
    padding: 20px;
    text-align:justify;

}

Answer 3

给模态一个比幻灯片更高的 z-index。将 z 索引视为层。1 大于 0。

.modal {
z-index:1000;
background: #fff;
width: 600px;
margin: 20px auto;
border-radius: 30px;
border: 6px solid #000;
padding: 20px;  
text-align:justify;}

.slideshow img{
z-index:10;}

Answer 4

使用 z-index 怎么样？你能 jsfiddle 你当前的代码吗？

http://jsfiddle.net/Qg5Ts/1/

    .modal {
        position:relative;
        z-index:1000;
        background: #fff;
        width: 300px;
        margin: 20px auto;
        border-radius: 30px;
        border: 6px solid #000;
        padding: 20px;
        text-align:justify;
    }