使用滑块模块的 z-index答案

【问题标题】：z-index with using slider module使用滑块模块的 z-index
【发布时间】：2015-08-17 18:07:05
【问题描述】：

我通常不会在论坛上发帖，但我很想知道为什么右侧的红色 div（带有文本）不会出现在白色导航栏的顶部。它总是出现在它的后面。

我在使用 firebug 的项目上玩过 position: relative/absolute，并设置了 z-index.. 但是它似乎没有什么不同，并将红色 div 放在前面。我想知道这是不是因为涉及到javascript？

希望能提供一些有关导致分层问题的原因以及解决该问题的潜在 CSS 的指导。

网址http://tinyurl.com/p445t34

【问题讨论】：

I normally don't post to forums，我的情况也是如此，直到我发现这个 StackOverflow。
这不是一个论坛...这是一个问答网站。你提出问题并得到答案。论坛邀请讨论，我们不邀请。
希望我的回答对您有所帮助。如果您有任何问题，请告诉我。

标签： jquery css z-index

【解决方案1】：

您希望出现在上方的<div> 的父元素（ID 为“MS53c65ec22f27f”和类“master-slider”）的z-index 为 0。这已将其自身及其子元素设置在下方白色导航栏，其z-index 为 1。

由于父元素设置在导航后面，因此无论 z-index 是什么，父元素中的任何内容都位于单独的层上。

我认为没有一种简单的方法可以用 css 解决这个问题。您需要从父元素中删除 z-index，否则将其赋予与导航相同或更高的值。

理想情况下，我认为您需要稍微重新排序 html。

这是我认为您想要的效果的理想设置。

非常基本的html设置：

<div id="body">
    <div id="nav">nav</div>
    <div id="slide">
        <div id="title"></div>
        <div id="image"></div>
    </div>
</div>

这里的 CSS 仅使用 z-index 定位子元素。

#body{
    height:300px;
    width:100%;
}

#nav{
    background-color:#eee;
    height:30px;
    width:100%;
    z-index:1;
    position:absolute;
    top:0;
    left:0;
}

#slide{
    background-color:#ccc;
    height:100%;
    width:100%;
}

#title{
    background-color:#900;
    height:80px;
    width:80px;
    position:absolute;
    top:0;
    right:30px;
    z-index:2;
}

#image{
    background-color:#999;
    height:100%;
    width:100%;
    z-index:0;
}

这是一个展示总体思路的小提琴：http://jsfiddle.net/Vcb2N/1/

因为#slide 元素没有指定z-index，所以子元素与#nav 元素保持在同一层中。

【讨论】：

是的，我认为可能是这样。不幸的是，滑块插件在那个位置输出图像和滑块，我只能在它周围插入我的代码。如果我破解了这个插件，我将来会失去更新它的能力。我希望能够用 CSS 来解决这个问题，如果代码有点长的话。
@AdamKwiatkowski 嗯，我认为这可能是你的问题。我想你可能会被那个卡住。有机会我会再看看。

【解决方案2】：

我遇到了同样的问题。我通过查看滑动点如何可见来解决此问题。解决方案是设置 z-index >= 1 并将可见性 css 属性设置为可见。

element {
    z-index: 1;
    visibility: visible;
}

【讨论】：