在Twitter上滑動側面板Z索引問題引導

我試圖建立一個滑動側面板的谷歌地圖，並遇到問題讓滑塊顯示在地圖上，同時保持地圖可點擊。在Twitter上滑動側面板Z索引問題引導

我能夠讓面板顯示的唯一方法是將地圖的Z-index設置爲負數，這使得它不可點擊。如何讓面板在地圖上滑出，同時保持地圖交互？

I've created a JSFiddle here where you can see the problem.

HTML：

<div class="container-fluid"> 
    <div id="slide-panel"> 
     <a href="#" class="btn btn-lg btn-primary" id="opener"><i class="glyphicon glyphicon-search"></i> Search</a> 

     <div style="overflow-y:auto; max-height:100%; padding:10px;"> 
      <h3>Search</h3>  
     </div>  
    </div> 

    <div id="map"> 
    </div> 

</div>

CSS：

#slide-panel { 
    width:300px; 
    max-width:100vw; 
    height:100vh; 
    padding:0px; 
    background:#fff; 
    margin-left:-310px; 
} 
#opener { 
    float:right; 
    margin:75vh -80px 0px 0px; 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -ms-transform: rotate(-90deg); 
    -o-transform: rotate(-90deg); 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
} 

#map { 
    position:absolute; 
    top:0px; 
    left:0px; 
    width: 100vw; 
    height: 100vh; 
    z-index:-1; 
}

JS：

$('#opener').on('click', function() {  
     var panel = $('#slide-panel'); 
     if (panel.hasClass("visible")) { 
      panel.removeClass('visible').animate({'margin-left':'-300px'}); } else { 
      panel.addClass('visible').animate({'margin-left':'0px'}); 
     } 
     return false; 
});

來源

2014-09-22 schnauss

這裏是工作提琴鏈接

變化CSS

#slide-panel { 
    width:300px; 
    max-width:100vw; 
    height:100vh; 
    padding:0px; 
    background:#fff; 
    position: relative; /*changes done */ 
    z-index: 999; /*changes done */ 
    margin-left: -315px; /*changes done */ 
} 
#opener { 
    /* float:right; 
    margin:75vh -80px 0px 0px; */ /*changes done */ 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -ms-transform: rotate(-90deg); 
    -o-transform: rotate(-90deg); 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
    z-index: 999; /*changes done */ 
position: absolute; /*changes done */ 
/* left: 0; */ 
bottom: 50px; /*changes done */ 
right: -80px; /*changes done */ 
} 

#map { 
    position:absolute; 
    top:0px; 
    left:0px; 
    width: 100vw; 
    height: 100vh; 
    /* z-index:-1; */ /*changes done */ 
}

變化的Javascript

$('#opener').on('click', function() {  
     var panel = $('#slide-panel'); 
     if (panel.hasClass("visible")) { 
      panel.removeClass('visible').animate({'margin-left':'-315px'});}else { 
      panel.addClass('visible').animate({'margin-left':'-20px'}); 
     } 
     return false; 
});

Working Fiddle

來源

2014-09-22 05:30:30

爲了把面板到堆疊環境，它可以給出一個相對位置（因此保持在正常流量）和z-指數大於地圖。

#slide-panel{ 
    position:relative; 
    z-index:2; 
    ... 
} 
#map{ 
    z-index:1; 
}

Live.

來源

2014-09-22 05:23:19 bonflash

在Twitter上滑動側面板Z索引問題引導

回答

相關問題