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格设置仍然显示了#additionalCostsButton后面即使WorkTableButtonActive类适用于它这层之上的股利另一个......对吗？

我在做什么错？

Answer 1

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

您需要的位置添加到您的#WorkTableButton，像这样：

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

#additionalCostsButton会出现落后之后#WorkTableButton。

Answer 2

变化

#additionalCostsButton { 
    left: -15px; 
} 

到

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