css: z-index and float-right - css

Question

I'm trying to lay my menu div onto facebook share div. The main problem is,that z-index doesn't work,even when i use position:relative on both div. Do You know,how i may to fix it?
P.S I added photo where You can see,what exactly goes wrong
http://img4.imageshack.us/img4/1563/problemscreenshot.png
<div id="facebook_connect">
<a href="something,something,something-thedarkside">
<img src="/img/facebook_connect.png"/>
</a>
</div>
<div id="header_menu">
<ul>
<li class="menu_link_left highlight">Strona główna</li>
<li class="menu_link_inside">O nas</li>
<li class="menu_link_inside">Usługi</li>
<li class="menu_link_right">Kontakt</li>
</ul>
</div>
and CSS code:
#facebook_connect{
height:50px;
width:20px;
top:30px;
position:relative;
z-index:1;
float:right;
}
#facebook_connect a, img{
position:relative;
z-index:1;
}
/*=======================================*/
#header_menu{
position:relative;
z-index:2;
height:30px;
width:350px;
background:#ececec;
border-radius:5px;
float:right;
top:60px;
-moz-box-shadow: 0px 0px 6px #000;
-webkit-box-shadow: 0px 0px 6px #000;
box-shadow: 0px 0px 6px #000;
}

Answer 1

So, if I'm not mistaken, what you're trying to accomplish is having your Facebook share button underneath your navigation, and I'm assuming you want it to protrude a bit from the top, giving it a somewhat layered effect.
If this is the case, the issue is not with the z-index, it is a positioning issue. You can correct this by placing the two divs within a container. Try this:
HTML:
<div id="cont">
<div id="header_menu">
<ul>
<li class="menu_link_left highlight">Strona główna</li>
<li class="menu_link_inside">O nas</li>
<li class="menu_link_inside">Usługi</li>
<li class="menu_link_right">Kontakt</li>
</ul>
</div>
<div id="facebook_connect">
<a href="something,something,something-thedarkside">
<img src="/img/facebook_connect.png"/>
</a>
</div>
</div>
CSS:
#cont {
position: relative;
top:60px;
float:right;
}
#facebook_connect{
position:absolute;
top: 5px;
right: 20px;
height:50px;
width:20px;
z-index:1;
}
#header_menu{
position: relative;
height:30px;
width:350px;
background:#ececec;
border-radius:5px;
-moz-box-shadow: 0px 0px 6px #000;
-webkit-box-shadow: 0px 0px 6px #000;
box-shadow: 0px 0px 6px #000;
z-index:2;
}
Then position as you see fit.