Search code examples
javascriptcssbanner

Fix banner position even if another fixed banner appear above it

I have two alert banners on a page, both have position: fixed. The top banner appears on a certain condition and when it appears, it moves the second banner below.

How do I keep the lower banner fixed to its position and not move down when the top banner appears

enter image description here

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

Solution

  • The z-index of the top banner is already higher than the banner below. What I did was set dynamic classes on the lower banner so that I can apply different top margin when the top banner is showing or not showing.

    Thanks to everyone who gave suggestions.