Align problem - z-index issue

Right, I have a header and a small div .sideShadow, I need .shideShadow div to be behind a #sideTopHeader div, right now i开发者_运维百科t is on the top of it, you can see it here (to your right)

http://inelmo.com

CSS I use now

#sideTopHeader {
background: #333333;
z-index: 1;
position: relative;
height: 50px;
margin: 0 -30px 0 0;

-webkit-border-radius: 7px 7px 0 7px;
-khtml-border-radius: 7px 7px 0 7px;
-moz-border-radius: 7px 7px 0 7px;
border-radius: 7px 7px 0 7px;
}

.sideShadow {
border-color: transparent transparent transparent #1f1f1f;
border-width: 15px;
border-style: solid;
height: 0;
width: 0;
position: absolute;
top: 35px;
left: 395px;
z-index: 0;
}

---

@llya; put your .slidershow div outside of yours #sideTopHeader div instead of inside like this

HTML:

<div id="sideTopHeader"></div>
<div class="sideShadow"></div>

& position relative to it's parent . May be that's work for you

---

Without changing the markup: don't use a z-index on #sideTopHeader (BTW: why is this an ID? Is there really only one element inside the sidebar?) and set the z-index to -1 for .sideShadow.

But I really suggest, you'd better clean up your markup. You don't really need three nested DIV's for styling a single content-element. For example instead of having a nested div.sideShadow, you may use a pseduo-element for CSS-effects, like #sideTopHeader:after.