flexbox 列中的项目不具有粘性答案

【问题标题】：item within flexbox column is not stickyflexbox 列中的项目不具有粘性
【发布时间】：2021-10-05 05:31:20
【问题描述】：

我尝试让标题中的菜单栏保持粘性。标题是一个垂直对齐的弹性框（弹性方向：列）。但正如您可能猜到的那样，它不起作用。

简化安排 here

HTML

<header>
    <div id="quality-logos">
       [some images here]
    </div>
    <div id="logo_motte_top">
        [a big logo here]
    </div>
    <div id="navigation-wrapper">
        <div id="navigation">
            [some navigation code here]
        </div>
        <div id="menu_promo_text">
            <div>Mo – Sa: 09 – 18 Uhr, So nach Vereinbarung</div>
        </div>
    </div>
</header>

CSS（缩短）

header{
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
div#navigation-wrapper{
    position:sticky;
    top:0;
}

你可以在motteduesseldorf.de看到它的直播

【问题讨论】：

标签： flexbox sticky

【解决方案1】：

对于您的website's link，您的<header> 是另一个名为#wrapper 的div 的子级。 position: sticky 可能正在应用，但它不可见，因为整个 <header> div 不在视图中。换句话说，position: sticky 仅在“直到”其直接父级有效。

解决问题的一种方法是将<div id="navigation-wrapper"> 移出<header> 并使其成为<div id="wrapper"> 的直接子代。

【讨论】：