Animate.css麻煩用z-index

我使用animate.css框架來處理很酷的動畫爲Web應用程序我建立，但是我有z-index的問題，當涉及到我的顯示內容。（我也應該注意到，我也使用了Twitter Bootstrap框架。）Animate.css麻煩用z-index

作爲一個例子，如果我有一個菜單，然後在其下面顯示一個面板，菜單的下拉菜單將會是顯示在面板後面，實際上，我希望它們在前面顯示。 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>

我，因爲我的應用程序應用「動畫」類面板和菜單都單獨（有目的的，菜單將在一次裝入，而不同的面板可以加載），但是當我從其中一個人中刪除課程時，它完美地工作。換句話說，如果只有一個元素具有「動畫」類，它就可以工作。如果他們都有「動畫」類，那不是。

有沒有人對我怎麼能解決這個問題的想法？

謝謝。

來源

2015-06-08 user3681508

你說的是，當你點擊菜單圖標？我看到由菜單推下的面板不會落後它。 – apaul

你是一個小的設備上觀看的jsfiddle？如果是這樣，那麼菜單縮放，並且不會發生問題。如果您在大型設備上查看JSFiddle，則應該發生。 – user3681508

不好意思啊，我不得不調整結果窗格 – apaul

刪除不必要的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>

來源

2015-06-08 01:38:53 apaul

Animate.css麻煩用z-index

回答

相關問題