Question

I currently have a tab image that I want to re-create in CSS, but I’m having some difficulty in covering up the box shadow of the content div.

This is what I currently have for CSS, and was wondering how I can get the tab div to cover the content div’s box shadow? I thought that z-index would have solved the problem, but the shadow is still visible.

    .sectionTab
{
    margin: 0px;
    padding-top: 7px;
    text-align: center;
    box-shadow: 0px -3px 5px #a6a6a6;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    z-index: 1;
}

.sectionContent
{
    margin: 0;
    padding: 15px;
    box-shadow: 0px -3px 5px #a6a6a6;
    z-index: 0;
}

And this is the html:

    <div class="sectionTab row span2">
    <h3>Tab title</h3>
</div>
<br /><br />
<div class="sectionContent span3">
        Regular text<br />
        <a href="#">Regular link</a>
        <span rel="tooltip" title="SIC Code Warning" class="ktIcon ktWarningOn"></span>
        <span rel="tooltip" title="ktWarningOff" class="ktIcon ktWarningOff"></span><br /><br />
        <input type="button" class="btn ktButton" value="Button" />
</div>

This is what I’m ending up with so far:

Answer 1

A background for your tab would be appropriate. It’s transparent otherwise.

So this:

.sectionTab
{
    margin: 10px 0 0 10px;
    padding-top: 7px;
    text-align: center;
    box-shadow: 0px -3px 5px #a6a6a6;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    z-index: 1;
    width: 100px;
    position: absolute;
    background: #fff;
}

.sectionContent
{
    margin: 0;
    padding: 15px;
    box-shadow: 0px -3px 5px #a6a6a6;
    z-index: -1;
    position: absolute;
    width: 300px;
    top: 30px;
}​

See a working example here: http://jsfiddle.net/cdk4H/1/