css - 粘性导航的 Z-Index 不起作用

Question

我正在使用 float 在页面内容前面的粘性导航开发自己的主题。

我的问题是即使我添加了这段代码，stickynavigation div 仍然在包装器后面。

.stickynavigation {
    width: 100%;
        margin: auto;
        position: relative;
        z-index: 9999;
        background: #FFF000;
        border-top: 2px solid #000;
        border-bottom: 1px solid #f1f1f1;
        display: block;
        min-height: 60px;
        padding: 10px 0;
}

.wrapper {
        max-width:1000px;
        width:95%;
        margin:0 auto;
        position:relative;
        z-index: 0 !important;
}

.stickynavigation - 包含小标志和导航

.wrapper - 包含 <?php the_contents();?>

知道如何让它发挥作用吗？使 Stickynavigation 位于所有元素的前面？

您可能会在我的网站上看到我在这里谈论的问题 - https://thepassport.ph/how-to-apply-for-philippine-passport/

非常感谢，感谢大家的帮助。

Answer 1

您需要在 sticky-wrapper div 上应用 z-index，如下所示:

.sticky-wrapper.is-sticky {
  position: relative;
  z-index: 999;
}

说明:默认情况下，浏览器将 z-index 顺序设置为在同一兄弟中的最后一个元素中较高，而在第一个元素中较低。

假设您有 3 个元素在同一个兄弟中，按照以下顺序然后浏览器处理它们:

<div>Element 1</div> // z-index: 1
<div> // z-index: 2
    Element 2
    <div>Sub element 1</div> // z-index: 1
    <div>Sub element 2</div> // z-index: 2
</div>
<div>Element 3</div> // z-index: 3

从上面的结构来看，无论你在 Sub element 1 元素上设置了多少 z-index，它都不会出现在 Element 3< 上面 直到您在 Element 2 中显式设置更高的 z-index。因为 z-index 总是首先比较兄弟元素。

还要注意正常工作z-index 推荐使用position: relative, absolute, fixed, sticky等