我有一个粘性导航栏(搜索栏)，但当您向下滚动时，它仍然与页面内容重叠

Question

我想知道当您向下滚动页面时，如何使搜索栏(而不是顶部导航栏(与页面内容不重叠。请注意，我有一个导航栏和一个搜索栏，我在本期中指的是搜索栏(粘性栏(，即我不打算让顶部导航栏粘住。

期望的结果：当页面向下滚动时，搜索栏位于内容顶部，而不是与页面内容重叠

我尝试过的事情：在代码中查看，下面的⬇️链接。

请参阅代码中的代码： https://codeply.com/v/1vpjO4BD6h

谢谢

Answer 1

xx101。你能创建一个非常简单的例子吗？也许在这样的js小提琴中？->

<header>header</header>
<main>
<section>main content stuff?</section>
<aside>
sidebar

<div class="field">
<label for="x">Search</label>
<input type="search">
</div>

</aside>
</main>

.

* {
border: 1px solid red;
padding: 2px;
}
main {
display: flex;
min-height: 200vh; /* for example */
}
.field {
position: sticky;
top: 0;
}

https://jsfiddle.net/sheriffderek/sq97ygvo/

希望 - 这个例子可以解释如何创建最小示例。

Answer 2

向.sticky类添加z-index值

.sticky {
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 99; // z-index value should be heigher the content z-index if any.
}

希望这就是您要实现的目标。