1

我正在尝试将我的菜单 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;
}
4

1 回答 1

4

所以，如果我没记错的话，你想要完成的是让你的 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;
}

然后按您认为合适的位置。

于 2012-11-09T19:12:46.177 回答