Question

我正在使用animate.css框架来处理我正在构建的Web应用程序的炫酷动画，但是在显示我的内容时我遇到了z-index问题。（我还应该注意到我也在使用Twitter Bootstrap框架。）

例如，如果我有一个菜单，然后是一个显示在其下方的面板，菜单的下拉菜单将显示在面板后面，实际上，我希望它们显示在前面。 Here is a basic JSFiddle我遇到的问题的例子。

以下是该示例的HTML。

<div class="container">
<div class="animated fadeInLeft">
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </button>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li><a href="#">Home</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Drop Down 1<span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Element 1</a></li>
                <li><a href="#">Element 2</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Drop Down 2 <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Element 1</a></li>
                <li><a href="#">Element 2</a></li>
              </ul>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>
</div>


<div class="animated fadeInLeft">
    <div class="panel panel-primary">
        <div class="panel panel-header">
            My Panel
        </div>
    </div>
</div>

我将“动画”类分别应用于面板和菜单（故意，因为在我的应用程序中，菜单将加载一次，而可以加载不同的面板），但当我删除从其中一个班级开始，它完美无缺。换句话说，如果只有一个元素具有“动画”类，它就可以工作。如果它们都有“动画”类，则不会。

有没有人知道如何解决这个问题？

感谢。

Answer 1

删除不必要的div并将动画类直接附加到元素本身。然后你可以根据需要设置z-index。

我怀疑你的问题在动画中可能是caused by the opacity change，但我对此并不太确定。

<强> Working Example

.panel {
    z-index: 1
}
nav {
    z-index:2
}


<div class="container">
    <nav class="navbar navbar-default animated fadeInLeft"> <!-- see change -->
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

                </button>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="#">Home</a>

                    </li>
                    <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Drop Down 1<span class="caret"></span></a>

                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Element 1</a>

                            </li>
                            <li><a href="#">Element 2</a>

                            </li>
                        </ul>
                    </li>
                    <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Drop Down 2 <span class="caret"></span></a>

                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Element 1</a>

                            </li>
                            <li><a href="#">Element 2</a>

                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>
    <div class="panel panel-primary animated fadeInLeft"> <!-- see change -->
        <div class="panel panel-header">My Panel</div>
    </div>
</div>

z-index

1 个答案: