布局/索引问题？答案

【问题标题】：Layout/indexing issue?布局/索引问题？
【发布时间】：2017-03-24 02:26:34
【问题描述】：

在我的网站上，我有一个通过 jQuery click 函数进行动画处理的 div，它应该显示在其他在 $(document).ready() 上进行动画处理的 div 上。但是，它仅在我网站的主页上显示在这些 div 后面，而不在任何其他页面上，仅在移动设备上显示。

首页：

在任何其他页面上：

这两种页面的唯一区别是在主页上，导航菜单和活页div的动画是这样的

对于导航菜单：

setTimeout(function(){  
            $('#avmenu ul li').each(function(i) {
                var $fc = $(this);
                setTimeout(function() {
                    $fc.addClass('flipInBottomBack').css({'pointer-events':'auto'});
                    }, i*250); // delay 250 ms
                });
            }, 6000);

flipInBottomBack 是一个 CSS 关键帧动画，以 opacity: 0 开头，过渡到 opacity: 1。

虽然松散的 div 通过 CSS 关键帧动画在动画类本身中设置了延迟设置动画。它具有以下 CSS 样式：

#welcome-box {
    width: 681px;
    height: auto;
    position: absolute;
    top: 160px;
    background: url(https://dl.dropbox.com/s/ab9udqlsxbxaelw/LooseLeafExtended.png);
    background-size: cover;
    border-radius: 10px;
    box-shadow: 0 0 10px 5px #000;
    opacity: 0;
}

在任何其他页面上，它们仅通过删除活页 div 的动画类并通过执行导航菜单的以下代码来显示：

$('#avmenu ul li').show().css({'opacity':'1'});

我玩过 CSS 索引属性，但即使作业 div 具有最高索引，它似乎也不起作用。为什么 div 显示在除首页之外的每个页面上？

【问题讨论】：

听起来您需要为您的 div 设置一个 z-index 才能正确排序内容。

标签： jquery css animation indexing

【解决方案1】：

请在您的代码中包含 z-index。

#welcome-box {
width: 681px;
height: auto;
position: absolute;
top: 160px;
background: url(https://dl.dropbox.com/s/ab9udqlsxbxaelw/LooseLeafExtended.png);
background-size: cover;
border-radius: 10px;
box-shadow: 0 0 10px 5px #000;
opacity: 0;
z-index: 12;
}

z-index 的值可能会根据上层 div 变化。

【讨论】：