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

如何解决即使另一个固定横幅出现在其上方，也修复横幅位置

我在一个页面上有两个警告横幅，都具有位置：固定。顶部横幅出现在特定条件下，出现时会将第二个横幅移动到下方。

当顶部横幅出现时，我如何保持下部横幅固定在其位置而不向下移动

.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 已经高于下面的横幅。我所做的是在下部横幅上设置动态类，以便在顶部横幅显示或不显示时应用不同的上边距。

感谢所有提供建议的人。