I am having trouble setting up a menu of tabs. I want it to move up so that it is positioned just above the previous div. However, every time I try to move it up, it ends up going underneath the previous div. I have attempted to change the z-index but without success.
Below is the styling for the previous div:
#product {
width: 950px;
margin: auto;
background: #FFFFFF;
color: #434649;
/* background: url(images/prod_bg.gif) repeat-x bottom; */
border-left:solid 1px #cccccc;
border-right:solid 1px #cccccc;
}
And here is the div I want to be positioned above the previous div:
.tabs { /* div wrapper */
margin-top:0px;
position:relative;
background:#FFFFFF;
top:-30px;
left:0;
}
.tabs ul { /* tabs */
float:left;
background:#fff;
padding-top:4px;
position:relative;
}
This is how the HTML structure looks like:
<div id="product">content here</div>
<div class="tabs"><ul><!-- tabs list --></ul></div>