Have Geek Brain

CSS Layering Quirks

Ok, so I have a couple of divs wrapped in a container. The two inner divs each overlap by 15px; The problem is I can't fold them the way I want.

 <div class="headerButtons">
    <div id="WorkTableButton" class="WorkTableButtonActive">
        Work Table
    </div>
    <div id="additionalCostsButton" class="additionalCostsButtonInactive">
        Additional Costs
    </div>
</div>

and the CSS looks like this,

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

The problem is that the #WorkTableButton div still appears behind the #additionalCostsButton even though the WorkTableButtonActive class is applied to it, which contains the div on top of another ... Right?

What am I doing wrong?

0


source to share


2 answers


This property z-index

only works on elements that have been specially positioned.

You need to add a position to yours #WorkTableButton

, for example:



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

#additionalCostsButton

will appear #WorkTableButton

after that.

+2


source


Change

#additionalCostsButton {
     left: -15px;
}


to

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


source






More articles:


All Articles