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

Question

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

如何在出现顶部横幅时将下方横幅固定在其位置而不向下移动

.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;
 }

Answer 1

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

感谢所有提出建议的人。

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

Fix banner position even if another fixed banner appear above it

javascript

css

banner