0

さて、コンテナにラップされた div がいくつかあります。2 つの内部 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;
}

問題は、WorkTableButtonActive クラスが適用されているにもかかわらず、#WorkTableButton div が #additionalCostsButton の背後にまだ表示されていることです。その div は他のレイヤーの上にあります... よね？

私は何を間違っていますか？

4

2 に答える 2

2

このz-indexプロパティは、明確に配置された要素に対してのみ機能します。

次のように、に位置を追加する必要があります#WorkTableButton。

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

#additionalCostsButton後から登場#WorkTableButtonします。

于 2009-05-05T03:42:51.040 に答える
1

変化する

#additionalCostsButton {
     left: -15px;
}

に

#additionalCostsButton {
     margin-left: -15px;
}
于 2009-05-05T03:26:49.443 に答える