見出しのdiv画像は、下の奥に表示する必要があります

ページの上位25％が見出し（画像あり）&ページの残りの部分に内容があるウェブページがあります。見出しのdiv画像は、下の奥に表示する必要があります

現在、見出しの画像がコンテンツのdivとして意図的にオーバーフローしているため、div要素の位置を壊してしまうと、コンテンツdivと同じ深さの画像が表示されるようにしようとしています（&）コンテンツ部門の

以下のコードは、見出し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-インデックスを2回指定しますか？ – SpliFF

@mack。であなたの#main divがある2 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画像は、下の奥に表示する必要があります

答えて

関連する問題