z-index隐藏div应该在上面

Question

我有一些社交媒体图标在设备缩放时被隐藏，并切换到.menu_scaled_wrapper。它在全屏幕上工作正常，但是当设备缩放时，它将它置于z-index之下，我告诉它在上面。

这是实时网站（它加载的网页是有问题的网页） http://factormedia.co.za/

我觉得它与缩放菜单有关。

当缩放到大约1500px的宽度时，即使其z-index高于该值，所有内容都会高于菜单。

的

的

.menu_scaled_wrapper{
    display:none;
    background: #f6f6f6;
    background: rgba(0,0,0,.6);
    position:fixed;
    height:80px;
    width:100%;
    z-index:5000;
    overflow: hidden;
    -webkit-transition: height 0.3s;
    -moz-transition: height 0.3s;
    transition: height 0.3s;
    -moz-box-shadow: -2px 5px 10px 0px #000;
    -webkit-box-shadow: -2px 5px 10px 0px #000;
    box-shadow: -2px 5px 10px 0px #000;
    z-index:5000;
}

的

Answer 1

你是对的，

这是因为Z-index仅适用于元素及其子元素。你提出的建议超出了这个范围。

将z-index 5001设置为.mainfade内的元素不会与.menu_scaled_wrapper的z-index交互，因为它超出了.mainfade的范围

您有两种选择。设置您的<aside class="mainfade">以获得这些css属性：

aside.mainfade {
    z-index: 5001;
    position: fixed;
}

aside.mainfade元素与.menu_scaled_wrapper元素的范围相同，因此z-index将与之交互。

或者您可以更改menu_scaled_wrapper的范围并将其放在<aside>内，反之亦然，将.mainfade移到<aside>之外，这样它就是.menu_scaled_wrapper的兄弟

Answer 2

您应该在“.mainfade”类之前放置“.menu_scaled_wrapper”类，并为所有媒体选项继承“.menu_scaled_wrapper”的z-index。我现在在你的网站上试过了。有用。 “.mainfade”类具有您的社交媒体图标，因此它必须高于其他图层。这就是你应该交换职位的原因。