3 
html, body {margin: 0px; padding: 0px;}

#pageContainer{ margin: auto; padding: auto;}
#contentContainer{ margin:150px; width:1100px; height: 100%; overflow: hidden; }
#leftContainer{ width: 80%; min-height: 800px; background: #009900; float:left;}
#left1{ margin:80px 0 0 80px; height: 550px; top:0px; z-index:1; background: #000000;}
#left2{ margin:80px 0 0 80px; height: 500px; top:110px; z-index:2000; background:#99FFFF; }
#rightContainer{ width: 20%; height: inherit; background: black; float:right;}

/ CSS Document */

以下のような 2 つの重複する div が必要です。

    ----------------------
   |                      |
   |   ------------------ |
   |  '                  '|
   |  '                  '|
   |  '                  '|
   |  '                  '|
   |  '                  '|
   |  '                  '|
   |  '                  '|
    ----------------------
      '                  '
      '                  '
       -------------------


<div id="pageContainer">
  <div id="contentContainer">
    <div id="leftContainer"> Am the left container 
      <div id="left1"> 
          <div id="left2">
          </div>
      </div>
    </div>
    <div id="rightContainer">

    </div>
  </div>
</div>

問題は、オーバーラップを取得できないことです。どこが間違っていますか？

編集 1: topx はタイプミスでした。修正しました。

4

1 に答える 1

5

W3Schools に記載されているように、それらをオーバーラップさせるには、使用する必要がありますposition: relative（absoluteまたはfixed同様に機能しますが、異なる結果が得られます）。それらをおよびに追加する必要があります。のはずか、ありません。#left1#left2lefttoptopx

ここjsfiddleでそれをいじることができます。

于 2010-06-03T15:18:26.593 に答える