gridster перетащить и падение не работает

Question

JSFiddle Пример: https://jsfiddle.net/27t0jymr/

<section id="mainContainer"> 
     <!-- Dashboard Section --> 
     <div class="dashboard"> 
      <div class="gridster"> 
       <ul> 
        <li data-row="1" data-col="1" data-sizex="2" data-sizey="2"><h1>PROJECT LOAD PER PERSON</h1></li> 
        <li data-row="1" data-col="2" data-sizex="2" data-sizey="2"><h1>RTN LOAD PER PERSON</h1></li> 
        <li data-row="1" data-col="3" data-sizex="2" data-sizey="2"><h1>TICKET LOAD PER PERSON</h1></li> 

        <li data-row="2" data-col="1" data-sizex="2" data-sizey="2"><h1>RTN LIFESPAN PER PERSON</h1></li> 
        <li data-row="2" data-col="2" data-sizex="2" data-sizey="2"><h1>TICKET LIFESPAN PER PERSON</h1></li> 
        <li data-row="2" data-col="3" data-sizex="2" data-sizey="2"><h1>UNTOUCHED FOR 7 DAYS</h1></li> 
       </ul> 
      </div> 
     </div> 

     <!-- Projects Section --> 
     <div class="projects"> 
      <span>PROJECT STUFF</span> 
     </div> 

     <!-- RTNs Section --> 
     <div class="rtns"> 
      <span>RTN STUFF</span> 
     </div> 

     <!-- Tickets Section --> 
     <div class="tickets"> 
      <span>TICKET STUFF</span> 
     </div> 

    </section> 

Я трудное время пытается получить gridster (http://gridster.net) плагина перетащить и падение функция работает в Chrome (версии 50.0.2661.94) , Тем не менее, он отлично работает в IE11. Кроме того, если добавить

.gridster ul { height: auto !important; } 

с перетащить и падение работ, но форматирование становится шатким как .gridster уль тогда не имеет высоту. Любая помощь в решении для этого будет принята с благодарностью! Заранее спасибо!

Answer 1

Хорошо, я понял, что проблема с z-index, которую я поставил на .gridster, была проблемой. Я забрал:

.gridster { z-index: -100; } 

И добавил положительный Z-индекс моего #topNav элемент, чтобы сохранить свое липкое меню над содержанием gridster.