如何添加一个覆盖我的主导航标题的粘性标题？答案

【问题标题】：How can I add a sticky-header that overlays my main navigation header?如何添加一个覆盖我的主导航标题的粘性标题？
【发布时间】：2019-05-25 01:22:26
【问题描述】：

<div class="sticky-header nav-row stick"> <span class="sticky-text"> <i class="fa fa-phone"></i> <strong>Don't wait another day. Your marketing solution is just a phone call away.</strong> </span> <a class="sticky-link" href="tel:561-396-9895" 561 396 9895</a> </div>

这是我编译的代码，但它在 wordpress 上不起作用......我应该如何调整它？另外，是否可以用 css 做到这一点？

【问题讨论】：

标签： html css wordpress header sticky

【解决方案1】：

你需要 css 来做，有些人甚至会说 js，但你没有提供任何 css 代码来帮助想出答案。尝试按照本 w3 学校指南进行操作

https://www.w3schools.com/howto/howto_js_sticky_header.asp

它应该有助于解决您的问题。

为了快速修复，请尝试将以下代码添加到您的粘头类或为其创建一个新类或 id

position: fixed;
top: 0;
left: 0;
z-index: 1000;

确保您的主导航标题的 z-index 属性小于 1000

【讨论】：

【解决方案2】：

也许你可以使用 css z-index ：

    .stickyHeader {
    position: sticky;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 1;
    background-color: lightgreen;
    height: 50px;
    }
    
    header {
    position: fixed;
    height: 30%;
    width: 100%;
    background-color: gray;
    }

<header>Header</header>

    <div class='stickyHeader'>
    <p>Example (under this is the header)</p>
    </div>


    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>

这有帮助吗？

【讨论】：