Css: Elements with position: relative; wisible trough other elements positioned on top

I have an unordered html list on:

<ul id="maintab" class="shadetabs">
<li class="selected">selected</li>
<li>not selected</li></div>

I need to use position: relative for "selected" items:

.shadetabs li.selected{
position: relative;
top: 1px;
............
}

Everything is OK so far. But now I want to show a div over all other content of website.

    <div id="vertical">
    <div id="hoz">
    content
</div></div>


    #vertical{
position:absolute;
top:50%;
margin-top:-198px;
left:0;
width:100%;
}
    #hoz{
width:320px;
margin-left开发者_如何学Python:auto;
margin-right:auto;
height:90px;
border:10px solid #BF0000;
background:#f5f5f5;
text-align:center;padding:10px;
} 

Unfortunately, this .shadetabs li.selected is visible trough divs "vertical" and "horizontal". I tried to add style="opacity: 1 !important;" to the "vertical" div but it doesn't help.

Give the element a z-index: 2. That way it will be drawn on top of other positioned content.