问题描述
我在一个页面上有两个警告横幅,都具有位置:固定。顶部横幅出现在特定条件下,出现时会将第二个横幅移动到下方。
当顶部横幅出现时,我如何保持下部横幅固定在其位置而不向下移动
.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 已经高于下面的横幅。我所做的是在下部横幅上设置动态类,以便在顶部横幅显示或不显示时应用不同的上边距。
感谢所有提供建议的人。