css - 下拉菜单和页面转换之间的可见性冲突

Question

我有两个似乎冲突的能力。当我移除另一个时，每个都可以完美地工作。第一个功能是一行下拉菜单。在它的正下方，我正在实现 PageTransitions图书馆。我的问题是当它存在时我的下拉菜单不再出现。这是一个屏幕截图:

当我注释掉转换库时，下拉菜单功能完美。当我用普通的旧 <div> 代替时并给它一个背景颜色，我可以看到下拉菜单。我浏览了图书馆，并确定了 z-index 值出现的位置。库中最高的 z-index 值为 999999，所以我给下拉菜单设置了 1000000 的 z-index。仍然没有。

阻止下拉的 div 在此 css 中描述 file在类里面 pt-page (第 12 行)，pt-page-1 (第 76 行)和 pt-page-current (第 31 行)。我尝试删除任何对背面可见性的引用，但这没有任何改变。这些是从该文件中摘录的类:

.pt-page {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.pt-page-current,
.no-js .pt-page {
    visibility: visible;
    z-index: 1;
}

这是我的 html 文件中的相关代码:

    <div id="innerframe">
        <div id="dropdown">
        <ul class="navigation">

            <li><a href="#">Workout Builder</a></li>

            <li><a href="#">Send Email</a></li>

            <li><a href="#">Building Blocks</a>
                <ul>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                </ul>           
                <div class="clear"></div>
            </li>

            <li><a href="#">Other Capabilities</a>
                <ul>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                </ul>
                <div class="clear"></div>
            </li>

            <li><a href="#">Help</a></li>

            <li><a href="#">Log Out</a></li>

        </ul> <!--navigation-->
        <div class="clear"></div>
    </div> <!--dropdown-->

        <div class="pt-triggers">
            <button id="iterateEffects" class="pt-touch-button">Show next page transition</button>
            <div id="dl-menu" class="dl-menuwrapper">
            </div>
    <!-- /dl-menu-wrapper-->
    </div><!-- /triggers -->

        <div id="pt-main" class="pt-perspective">
            <div class="pt-page pt-page-1"><h1><span>A collection of</span><strong>Page</strong> Transitions</h1></div>
            <div class="pt-page pt-page-2"><h1><span>A collection of</span><strong>Page</strong> Transitions</h1></div>
            <div class="pt-page pt-page-3"><h1><span>A collection of</span><strong>Page</strong> Transitions</h1></div>
            <div class="pt-page pt-page-4"><h1><span>A collection of</span><strong>Page</strong> Transitions</h1></div>
            <div class="pt-page pt-page-5"><h1><span>A collection of</span><strong>Page</strong> Transitions</h1></div>
            <div class="pt-page pt-page-6"><h1><span>A collection of</span><strong>Page</strong> Transitions</h1></div>
        </div>

    </div> <!--innerframe-->

导航类的CSS:

/* Adjusting the margins, paddings and no list styles */
.navigation  {
    margin:0; 
    padding:0; 
    list-style:none;
    height:36px;
    z-index:1000000;
}   

/* Little tricking with positions */
.navigation  li {
    float:left;         /* Show list items inline */
    width:200px; 
    position:relative; 
}

/* Playing with Main Categories */
.navigation  li a {
    background:#262626; 
    color:#aaaaaa;
    display:block;      /* Making sure a element covers whole li area */
    padding:8px 7px 8px 7px; 
    text-decoration:none; /* No underline */
    border-top:1px solid #73bf00;
    text-align:center; 
    text-transform:uppercase;
}

.navigation  li a:hover {
    color:#73bf00;
}

/* Sub Cat Menu stuff*/
.navigation  ul {
    position:absolute; 
    left:0; 
    display:none; /* Hide it by default */
    margin:0 0 0 -1px; 
    padding:0; 
    list-style:none;
    border-bottom:3px solid #73bf00;
}

.navigation  ul li {
    width:200px; 
    float:left; 
    border-top:none;
}

/* Sub Cat menu link properties */
.navigation  ul a {
    display:block;      /* Making sure a element covers whole li area */
    height:15px;
    padding:8px 7px 13px 7px; 
    color:#aaaaaa;
    text-decoration:none;   
    border-top:none;
    border-bottom:1px dashed #000000;
}

.navigation  ul a:hover {
    color:#73bf00;
}

抱歉所有代码。我无法确定是哪几行导致了问题。感谢任何可能会看这个的人。对此，我真的非常感激。我不知道还能去哪里。

Answer 1

如果您的下拉菜单隐藏在主要内容 div 后面，指定 z-index 可以将它们带到顶部。

请记住，为了在元素上使用 z-index，您还需要将定位设置为 position: relative。

尝试将 position: relative 添加到您的 .navigation 类中。