使用粘性位置和绝对在一起

Question

我有这个代码

#wrapper {position: relative;}
#content {padding-top: 100px;}
#search {position: absolute; /*position: sticky; position: -webkit-sticky;*/ top: 0; left: 40%; height: 100px; background: red; width: 20%;}

<div id="wrapper">
<div id="content">
content<br>content<br>content<br>content<br>content<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>content
</div>
<div id="sibebar">...</div>
<div id="footer">...</div>

<div id="search"></div>
</div>

我需要在#content元素之后的代码中有#search元素，绝对位于顶部。滚动后，我需要修复页面顶部的搜索元素。

有什么想法吗？

我试过添加具有绝对位置的#search_wrap和具有粘性位置的#search，但没有成功。

谢谢。

Answer 1

grid(再次(可以救你避开，但可以模拟position:absolute;并使用position:sticky；将两个元素都设置在同一网格单元中。

#wrapper {
position: relative;
display: grid;
}
#content,
#search {
grid-row: 1;
grid-column: 1;
}
#content {
padding-top: 100px;
}
#search {
position: sticky;
top: 0;
margin: 0 auto;
height: 100px;
background: red;
width: 20%;
}

<div id="wrapper">
<div id="content">
content<br>content<br>content<br>content<br>content<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>content
</div>
<div id="sibebar">...</div>
<div id="footer">...</div>
<div id="search"></div>
</div>

Answer 2

您是否考虑过用javascript而不是仅用css来完成这一切？这将让你对你试图实现的目标有更多的控制权：

• 您可以附加/分离css元素，以确保实现您的自定义行为如果您试图混合一些位置，那么您绝对应该研究javascript路径

我写了一篇文章，将javascript实现封装在一个钩子中，您可能会觉得它很有用。我可以重写所有内容，但你在这里查看更容易。

希望我的回答能起到指导作用：(