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 إليها التي طبقة شعبة فوق الأخرى ... أليس كذلك؟

وماذا أفعل الخطأ؟

Answer 1

والخاصية z-index يعمل فقط على العناصر التي تم وضعه على وجه التحديد.

وتحتاج إلى إضافة إلى موقف #WorkTableButton الخاص بك، مثل هذا:

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

وستظهر #additionalCostsButton وراء #WorkTableButton بعد ذلك.

Answer 2

تغيير

#additionalCostsButton {
     left: -15px;
}

إلى

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