css：z-index和float-right

Question

我正在尝试将我的菜单div放到facebook share div上。主要的问题是，即使我在两个div上使用position：relative，z-index也不起作用。你知道吗，我怎么解决它？ P.S我添加了照片，你可以看到，到底出了什么问题

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;
}

然后按照你认为合适的位置。