Абсолютное позиционирование и чувствительные divs

Question

Я создаю отзывчивый сайт с изображением баннера в абсолютно позиционированном div, а затем еще один абсолютно позиционированный div, который перекрывает его, используя свойства z-index для текста, установленного сверху.

Это приводит к тому, что нижний колонтитул исчезает ниже этих элементов. Поскольку вышеперечисленные divs являются отзывчивыми, я не могу использовать свойство margin на более поздних divs, чтобы остановить их отображение ниже абсолютно позиционированных элементов. Мне интересно, что самый простой способ обойти это, и надеяться, что кто-то может указать мне в самом простом направлении!

HTML:

<div id="header"> 
     <h1>Logo</h1> 
      <div id="nav"> 
       <ul> 
        <li><a href="">Home</a></li> 
        <li><a href="">Products</a></li> 
        <li><a href="">Services</a></li> 
        <li><a href="">About</a></li> 
        <li><a href="">Contact</a></li> 
       </ul> 
      </div> 
    </div> 

      <div id="bannerdiv"> 
       <div id="largebanner"> 
       <img src="images/large-banner.jpg"; width: 2304px; height: 800px;> 
       </div> 
       <div id="mediumbanner"> 
       <img src="images/medium-banner.jpg"; width: 1152px; height: 400px;> 
       </div> 
       <div id="bannertext"> 
        <p id>tester</p> 
       </div> 
      </div> 

      <div id="footer"> 
     <p>Footer</p> 
    </div> 

CSS:

img { height: auto; display: block; max-width: 100%;} 
body {width: 90%; margin: 0 auto;} 

#nav {text-align: center;} 
#header h1 {text-align: center;} 
#bannerdiv { height: auto; position: relative; } 
#largebanner { z-index: 1; position: absolute; } 
#mediumbanner { z-index: 1; position: absolute; } 
#bannertext { position:absolute ; z-index: 10; margin: 40px 0 0 40px;} 
#footer {float: left; position: relative;} 
li { 
display: inline; 
padding: 0.5em; 
} 

#nav, #footer { 
background-color: #efefef; 
padding: 0.5em 0; 
position: relative; 
} 


@media all and (min-width: 1201px) { 

#largebanner {display: block; z-index: 1;} 
#mediumbanner {display: none;} 
} 
@media all and (max-width: 1200px) 
{ 
#largebanner {display: none;} 
#mediumbanner {display: block;} 
} 

Answer 1

Вы используете рамки как бутстрапе?

Кроме того, для нижних колонтитулов, исчезающих под элементами, верхний и нижний колонтитулы должны быть заключены в div, чтобы это не происходило.

Было бы хорошо, если бы я мог видеть проблему в действии, поэтому я могу ее понять больше.