1

メニュー div を Facebook 共有 div に配置しようとしています。主な問題は、両方の div で position:relative を使用しても、z-index が機能しないことです。どうすれば直せますか？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にあるのではなく、ポジショニングの問題です。これを修正するには、2つの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 に答える