標題div圖像應顯示在較低的深度

我有一個網頁的頂部25％的頁面是標題（其中的圖像）&該頁面的其餘部分有內容。標題div圖像應顯示在較低的深度

我想要顯示的標題div是在較低的深度作爲內容div的圖片，因爲當前標題圖像溢出到內容div（故意）&時，他們搞砸了HTML元素的位置在內容分區。

我在下面的代碼應該使標題div顯示在內容div下面，但它沒有。你能幫我弄清楚爲什麼&如何解決它？

我的CSS：

html, body { height: 100%; width: 100%; } 
    body  { background-color: RGB(255, 255, 255); margin: 20px; text-align: center; } 

    #outerContainer { background-color: #DCFF9A; height: 100%; width: 100%; } 
    #header   { width: 1200px; height: 25%; background-color: blue; margin-left: auto; margin-right: auto; overflow: visible; z-index: -5; } 
    #main   { display: block; width: 1200px; height: 60%; background-color: blue; margin-left: auto; margin-right: auto; z-index: 5; } 
    #navBar   { float: left; height: 800px; width: 240px; background-color: red; } 
    #content  { float: left; height: 800px; width: 760px; background-color: yellow; } 

    #kamaleiText { float: left; } 
    #kamaleiLogo { float: left; padding-top: 30px; background-color: green; z-index: inherit; } 
    #kamaleiLeaves { float: right; z-index: -2; background-color: cyan; z-index: inherit; }

我的HTML如下：

<body> 

    <div id="outerContainer"> 

     <!-- Knowtice if I set the images width to something smaller then everything is spaced out correctly, so these elements are not being shown below others when they should be --> 

     <div id="header"> 
      <img id="kamaleiLogo" src="" alt="Pic1" height="98%" width="300px"/>  
      <img id="kamaleiLeaves" src="" alt="Pic2" height="300px" width="300px"/> 
     </div> 
     <br/> 
     <div id="main"> 
      <div id="navBar"> 
      </div> 

      <div id="content"> 
       abcdef 
      </div> 
     </div> 
    </div> 

</body>

來源

2011-06-28 Mack

爲什麼kamaleiLeaves指定z-index兩次？ – SpliFF

@mack;在#main div有兩個floated elements所以第一clear可能這就是對你的工作

#main   { overflow:hidden;width: 1200px; height: 60%; background-color: blue; margin-left: auto; margin-right: auto; z-index: 5; }

來源

2011-06-28 06:02:52 sandeep

你可以看看這個jsfiddle

基本上，我已經做了#outerContainer和#header相對定位，並增加了z-index所以它出現在頂部

然後絕對位於標題中的pic1和pic2，以便它們溢出到主要內容

#outerContainer { position: relative; background-color: #DCFF9A; height: 100%; width: 100%; } 
#header   { position: relative; width: 1200px; height: 25%; background-color: blue; margin-left: auto; margin-right: auto; overflow: visible; z-index: 100; } 
#kamaleiLogo { position: absolute; top:0; left:0; padding-top: 30px; background-color: green; z-index: inherit; } 
#kamaleiLeaves { position: absolute; top:0; right:0; background-color: cyan; z-index: inherit; }

來源

2011-06-28 06:03:09 Beno

標題div圖像應顯示在較低的深度

回答

相關問題