Особенности CSS Layering

Question

Хорошо, у меня есть пара div, завернутые в контейнер. Два внутренних деления перекрываются каждый на 15 пикселей; Проблема в том, что я не могу наложить их так, как хочу.

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

Проблема в том, что div #WorkTableButton все еще отображается за #additionalCostsButton, даже если к нему применяется класс WorkTableButtonActive, который разделяет div над другим ...

Что я делаю не так?

Answer 1

Свойство z-index работает только с элементами, которые были специально расположены.

Вам необходимо добавить позицию к вашему #WorkTableButton, например:

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

#additionalCostsButton появится после #WorkTableButton после этого.

Answer 2

Изменение

#additionalCostsButton {
     left: -15px;
}

до

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