Problème de divs chevauchants - 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 */ 

J'ai besoin de deux div superposés, qui ressemblent à celui ci-dessous.

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


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

Le problème est de ne pas obtenir le chevauchement. Où vais-je mal?

Édition 1: topx était une faute de frappe, corrigé.

Answer 1

Vous devez utiliser position: relative (absolute ou fixed aussi bien mais ils vous donneront des résultats différents) pour les amener à se chevaucher comme stated at W3Schools. Vous devez les ajouter à #left1 et #left2. Il devrait être left ou top, il n'y a pas topx.

You can fiddle with it here at jsfiddle.