Stacking images in HTML/CSS

I have a <ul> list with two <li>s within it as follows:

<ul>
            <li id="sc-1">
            </li>
            <li id="sc-2">
            </li>
</ul>

My CSS for these elements is as follows:

#sc-1{
    background-image:img/banner1.jpg no-repeat center;
    overflow:hidden
    position: relative;
    z-index:5;
}

#sc-2{
    background-image:img/banner2.jpg no-repeat center;
    overflow:hidden;
    position: relative;
    z-index:4;
}

ul{
    width:100%;
    margin-left:auto;
    margin-right:auto;
    list-style-type: none;
}

li{
    display:block;
    width:92.3%;
    height:300px;
    position: absolute;
}

Is there any possible way to stack these images so sc-1 is ontop ofsc-2?