时间戳

首页 > 解决方案 > 相对定位的内容高于粘性定位的标题

css - 相对定位的内容高于粘性定位的标题

问题描述

看看下面的代码片段。

<div class="container">
    <div class="header" style="position:sticky;top:0">
        Header
    </div>
    <div class="content" style="position:static">
        Page content
        ...
    </div>
</div>

在这里向下滚动页面时，内容位于标题下方。一切都按预期工作。

但是，如果我将 'content' div 定位更改为relative，则在滚动页面时内容开始越过粘性标题。

为什么会发生这种情况？有没有不使用 z-index 的解决方案？

标签： csspositioncss-positionsticky

解决方案

推荐阅读