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 */ 

아래처럼 보이는 중복되는 div가 2 개 필요합니다.

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


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