CSS 레이어링 문제

Question

좋습니다. 두 개의 div가 컨테이너에 싸여 있습니다.두 개의 내부 div는 각각 15px씩 겹칩니다.문제는 내가 원하는 대로 레이어를 쌓을 수 없다는 것입니다.

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

CSS는 다음과 같습니다.

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

문제는 WorkTableButtonActive 클래스가 다른 div 위에 있는 div 레이어에 적용되어도 #WorkTableButton div가 #additionalCostsButton 뒤에 계속 표시된다는 것입니다.오른쪽?

내가 도대체 ​​뭘 잘못하고있는 겁니까?

Answer 1

그만큼 z-index 속성은 특별히 배치된 요소에서만 작동합니다.

위치를 추가해야 합니다. #WorkTableButton, 이와 같이:

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

#additionalCostsButton 뒤에 나타날 것이다 #WorkTableButton 이후.

Answer 2

변화

#additionalCostsButton {
     left: -15px;
}

에게

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