重叠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.