CSS Layering Quirks

Question

Très bien, donc j'ai un couple divs enveloppé dans un conteneur. Les deux divs intérieurs se chevauchent chacun de 15px; Le problème est que je ne suis pas capable de les superposer comme je le veux.

<div class="headerButtons"> 
    <div id="WorkTableButton" class="WorkTableButtonActive"> 
     Work Table 
    </div> 
    <div id="additionalCostsButton" class="additionalCostsButtonInactive"> 
     Additional Costs 
    </div> 
</div> 

et le CSS ressemble donc,

.headerButtons{ 
    margin:auto; 
    text-align:center; 
} 
.headerButtons div{ 
    text-align:center; 
    height:27px; 
    text-indent:-9999%; 
    display:inline-block; 
    cursor:pointer; 
} 

#WorkTableButton{ 
    width: 195px; 
} 

.WorkTableButtonActive{ 
    background: url(ui_images/WorkTableActiveButton.png) no-repeat; 
    z-index:99999; 
} 

#additionalCostsButton{ 
    width: 192px; 
    position:relative; 
    left: -15px; 

} 
.additionalCostsButtonInactive{ 
    background: url(ui_images/AdditionalCostsInnactiveButton.png) no-repeat; 
    z-index:0; 
} 

Le problème est, la div #WorkTableButton montre toujours derrière le #additionalCostsButton même si la classe WorkTableButtonActive est appliquée qui couche div ci-dessus l'autre ... D'accord?

Qu'est-ce que je fais mal?

Answer 1

La propriété z-index ne fonctionne que sur les éléments qui ont été spécifiquement positionnés.

Vous devez ajouter une position à votre #WorkTableButton, comme ceci:

#WorkTableButton{ 
    width: 195px; 
    position: relative; 
} 

#additionalCostsButton apparaît derrière #WorkTableButton après.

Answer 2

changement

#additionalCostsButton { 
    left: -15px; 
} 

à

#additionalCostsButton { 
    margin-left: -15px; 
}