Html 如何将粘性导航条强制设置为；“覆盖”；其内容

假设我有一个如下所示的导航栏：

*{
框大小：边框框；
}
html，
身体{
宽度：100%；
高度：100vh；
保证金：0；
填充：0；
}
身体{
显示器：flex；
证明内容：中心；
}
.集装箱{
宽度：100px；
身高：100%；
转换：translateX（50px）；
/*变换示例（我不能使用位置：固定）*/
背景颜色：绿色；
溢出y：滚动；
}
navbar先生{
宽度：100%；
高度：50px；
背景色：rgba（255,255,0,0.5）；
排名：0；
}
.navbar.sticky{
职位：-网络工具包粘性；
位置：粘性；
}
.导航栏。固定{
位置：固定；
}

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

从底部留有边距的导航栏中减去导航栏的高度即可

*{
框大小：边框框；
}
html，
身体{
宽度：100%；
高度：100vh；
保证金：0；
填充：0；
}
身体{
显示器：flex；
证明内容：中心；
}
.集装箱{
宽度：100px；
身高：100%；
转换：translateX（50px）；
/*变换示例（我不能使用位置：固定）*/
背景颜色：绿色；
溢出y：滚动；
}
navbar先生{
--导航条高度：50px；
宽度：100%；
高度：var（--navbarheight）；；
背景色：rgba（255,255,0,0.5）；
排名：0；
}
.navbar.sticky{
职位：-网络工具包粘性；
位置：粘性；
页边距底部：计算（0px-var（--navbarheight））；/*或者换句话说是-50px*/
}
.导航栏。固定{
位置：固定；
}

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

一旦满足条件，您需要JS将

粘性

切换到

固定

。CSS无法做到这一点，@Paulie\u D所以位置没有办法：粘性对象最初位于它之后的内容之上？不…粘性不会像这样覆盖内容，也不是有意的。@Paulie\u D这是。。。不幸的有没有位置的替代方法：fixed不需要我用JS不断更新导航栏的位置？除非您将粘性导航高度的负

边距顶部设置为导航后的第一个元素（
.navbar+*{margin top:-50px；}
）。但可能并不理想