絕對定位和響應的div

-1

我在一個絕對定位的div中製作了一個橫幅圖像的響應站點，然後是另一個絕對定位的div，它使用頂部文本的z-index屬性重疊。絕對定位和響應的div

這會導致頁腳在這些元素下面消失。由於上面的div是響應式的，我不能在後面的div上使用margin屬性來阻止它們顯示在絕對定位的元素下面。我想知道最簡單的方法是什麼，並希望有人能指出我最簡單的方向！

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

來源

2015-08-24 user1880036

如果您將自己編寫的代碼鏈接到目前爲止，您將有更多機會獲得答案，因爲它更容易理解問題。 –

歡迎來到Stack Overflow。我們很樂意幫助你。爲了提高獲得答案的機會，下面是一些提示：[我如何提出一個好問題？]（http://stackoverflow.com/help/how-to-ask） –

絕對定位是一個**非常* *佈置網頁的方法不佳。它非常不靈活，並且有更好和更快的響應選項[** LearnLayout.com **]（http://learnlayout.com/） –

你使用像引導一個框架？

此外，對於頁腳消失在元素下方的頁腳，頁眉，頁腳和頁腳需要封裝在div中以防止發生。

如果我能看到問題的實際情況，那將會很好，所以我可以更多地理解它。

來源

2015-08-24 15:55:59

感謝所有迄今爲止自願幫助的人，現在添加了代碼！ – user1880036

絕對定位和響應的div

回答

相關問題