修复横幅位置，即使另一个固定横幅出现在其上方答案

【问题标题】：Fix banner position even if another fixed banner appear above it修复横幅位置，即使另一个固定横幅出现在其上方
【发布时间】：2021-07-19 08:15:49
【问题描述】：

我在一个页面上有两个警告横幅，它们的位置：固定。顶部横幅在特定条件下出现，当它出现时，它会移动下面的第二个横幅。

如何使下部横幅固定在其位置，并且在顶部横幅出现时不向下移动

.top-banner {
   background-color: $red;
   -webkit-transition: all 0.3s linear 0s;
   transition: all 0.3s linear 0s;
   color: $white-color;
   height: 36px;
   text-align: center;
   display: flex;
   align-items: center;
   justify-content: center;
   position: fixed;
   top: 0;
   right: 0;
   left: 0;
   z-index: 1031;
   font-size: 13px;
}

 .lower-banner {
    background-color: $red;
    -webkit-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
    color: $white-color;
    height: 36px;
    font-size: 13px;
    text-align: center;
    padding: 10px;
    position: fixed;
    z-index: 9;
    top: 56px;
    width: calc(100% - 240px);
    left: 240px;
 }

【问题讨论】：

我认为您必须将重叠横幅的z-index CSS 属性设置为高于始终出现的值。
不清楚为什么一个横幅会移动另一个横幅，如果它们都独立固定定位。请提供您的问题的正确minimal reproducible example。
请出示您的代码

标签： javascript css banner

【解决方案1】：

顶部横幅的 z-index 已经高于下方横幅。我所做的是在下部横幅上设置动态类，以便在顶部横幅显示或不显示时应用不同的上边距。

感谢所有提出建议的人。

【讨论】：