好吧,我已经将几个 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 在另一层之上...对吗?
我做错了什么?
最佳答案
z-index
属性仅适用于已明确定位的元素。
您需要向您的#WorkTableButton
添加一个位置,如下所示:
#WorkTableButton{
width: 195px;
position: relative;
}
#additionalCostsButton
将出现在 #WorkTableButton
之后。
关于CSS 分层怪癖,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/823156/