重疊divs的問題 - CSS

Question

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是一個錯字，糾正它。

Answer 1

你需要使用position: relative（absolute或fixed工作，但他們會給你不同的結果），讓他們重疊爲stated at W3Schools。您需要將它們添加到#left1和#left2。它應該是left或top，沒有topx。

You can fiddle with it here at jsfiddle.