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

问题是，#WorkTableButton div 仍然显示在 #additionalCostsButton 后面，即使 WorkTableButtonActive 类应用于它的哪一层是 div 的上一层...对吗？

我究竟做错了什么？

Answer 1

该z-index属性仅适用于已明确定位的元素。

您需要在 中添加一个位置#WorkTableButton，如下所示：

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

#additionalCostsButton之后会出现在后面#WorkTableButton。

Answer 2

改变

#additionalCostsButton {
     left: -15px;
}

到

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