Question

我的标题中有一个菜单，但我有问题所以这是JsFiddle和我的一些代码：

HTML

<div id="menu">
  <div class="onglet">
    <a href="/"><div class="btn ">2</div></a>
    <div class="topbar-dialog hidden">
      <div class="modal-content">
        <ul>
            <li><a href="">XX<br/><span class="item-summary">xx</span></a></li>
             <li><a href="">xx<br/><span class="item-summary">xx xxxxx xxxxx</span></a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

CSS（只是一部分）

.topbar-dialog.hidden{margin-top:-450px;-webkit-transition:.5s;z-index:-1;}

所以有一个问题。正如您所看到的，菜单显示在文本下...如果我将z-index:-2;设置为文本，则菜单将变得无用......

也许有人可以帮助我......

修改
我忘了提到菜单也应该在<div id="menu">

后面

Answer 1

CSS过渡后你有一个z-index：-1。你更容易看到你是否“整理”jsfiddle中的代码。删除它似乎可以实现你想要的。更新了小提琴：http://jsfiddle.net/8FZ4r/3/

相关摘录，已编辑：

.topbar-dialog.hidden {
    font-family:'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-size:12px;
    background-color:#fff;
    box-shadow:0 2px 2px rgba(0, 0, 0, 0.2);
    z-index:999;
    position:absolute;
    text-align:left;
    border-left:1px solid #e0e0e0;
    border-right:1px solid #e0e0e0;
    border-bottom:1px solid #e0e0e0;
    margin-top:-450px;
    -webkit-transition:.5s;
}

Answer 2

您需要将z-index更改为正值。

Answer 3

我不知道是否是一个好的解决方案，但它确实有效。

首先，在您的div <div id="menu">中添加一个新的div（空）<div class="layout"></div> 并考虑改变父div的位置（relative）。这是CSS：

#menu{background:#D5D5D5;text-shadow:1px 1px 0 #eee;position:relative;}
#menu .layout{position:absolute;height:100%;width:100%;z-index:99;background:#D5D5D5}

然后，只需在菜单中添加z-index:2即可。结果如下：http://jsfiddle.net/8FZ4r/5/

带z-index的菜单（转换）

3 个答案: