Question
D'accord, j'ai donc quelques divs emballés dans un conteneur. Les deux divisions intérieures se chevauchent chacune de 15 pixels; Le problème est que je ne peux pas 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 à ça,
.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 que la div #WorkTableButton apparaît toujours derrière la #additionalCostsButton même si la classe WorkTableButtonActive lui est appliquée, ce qui la superpose au-dessus de l'autre ... Bon?
Qu'est-ce que je fais mal?
La solution
La propriété z-index
ne fonctionne que sur les éléments spécifiquement positionnés.
Vous devez ajouter une position à votre #WorkTableButton
, comme suit:
#WorkTableButton{
width: 195px;
position: relative;
}
#additionalCostsButton
apparaîtra derrière #WorkTableButton
après cela.
Autres conseils
Changer
#additionalCostsButton {
left: -15px;
}
à
#additionalCostsButton {
margin-left: -15px;
}