DIV floating issue

Question

As shown on this page

I have tried all I can to make the overflown part of the logo to display on-top of the slideshow but it wouldn't work. The CSS is as shown below.

  #logo {
    float: left;
    position: absolute;
    margin-top: -58px;
    width: 250px;
    margin-left: -52px;
}

.clear {
    clear:both
}

#gallery {
    width: 100%;
    float: left;
    margin-bottom: -28px;
    position: absolute;
    height: 509px;
}
    #gallery a {
        float:left;
        position:absolute;

    }

    #gallery a img {
        border:none;
        width: 100%;
        float: left;
        position: absolute;
        margin-bottom: -28px;
    }

    #gallery a.show {
    z-index:500;
    width: 100%;
    position: absolute;
    margin-bottom: -28px;
    height: 509px;
    float: left;
    }

    #gallery .caption {
        z-index:600;
        background-color:#000;
        color:#ffffff;
        height:100px;
        width:100%;
        position:absolute;
        bottom:0;
    }

    #gallery .caption .content {
        margin:5px
    }

    #gallery .caption .content h3 {
        margin:0;
        padding:0;
        color:#1DCCEF;
    }

Answer 1

Just add z-index for your logo id then it should work. Half of your logo is sitting behind the slider.

#logo {
    float: left;
    position: absolute;
    margin-top: -58px;
    width: 250px;
    margin-left: -52px;
z-index:599;
}