css：z-index和float-right

Question

我試圖把我的菜單div放到facebook分享div上。主要的問題是，z-index不起作用，即使當我在兩個div上使用position：relative時也是如此。你知道嗎，我該如何解決它？ PS我添加的照片，你可以看到，究竟是什麼出了問題

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"><a href="<?php echo $this->url(array(), 'index') ?>">Strona główna</a></li> 
         <li class="menu_link_inside"><a href="<?php echo $this->url(array(), 'onas') ?>">O nas</a></li> 
         <li class="menu_link_inside"><a href="<?php echo $this->url(array(), 'uslugi') ?>">Usługi</a></li> 
         <li class="menu_link_right"><a href="<?php echo $this->url(array(), 'kontakt') ?>">Kontakt</a></li> 
        </ul> 
       </div> 

和CSS代碼：

#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

所以，如果我沒有記錯的話，你在做什麼試圖完成是讓你的Facebook分享按鈕在你的導航下，我假設你希望它從頂部突出一點，給它一個有點分層的效果。

如果是這樣的話，問題不在於z-index，這是一個定位問題。您可以通過將兩個div放入一個容器中來糾正此問題。試試這個：

HTML：

<div id="cont"> 

<div id="header_menu"> 
    <ul> 
     <li class="menu_link_left highlight"><a href="<?php echo $this->url(array(), 'index') ?>">Strona główna</a></li> 
     <li class="menu_link_inside"><a href="<?php echo $this->url(array(), 'onas') ?>">O nas</a></li> 
     <li class="menu_link_inside"><a href="<?php echo $this->url(array(), 'uslugi') ?>">Usługi</a></li> 
     <li class="menu_link_right"><a href="<?php echo $this->url(array(), 'kontakt') ?>">Kontakt</a></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; 
} 

然後的位置，你認爲合適的。