Twitter Bootstrap中的滑動側面板z-index問題

Question

我正在嘗試為Google地圖構建滑動側面板，並且在使滑塊保持在地圖可點擊性的同時，遇到使滑塊顯示在地圖上的問題。

我能夠顯示面板的唯一方法是將地圖的Z-index設置為負數，這使其無法點擊。 在保持地圖互動性的同時，如何使面板滑過地圖？

我在這里創建了一個JSFiddle，您可以在其中看到問題。

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;   
});

Answer 1

要將面板置於堆疊環境中，可以給它一個相對位置（從而使其保持正常流動），並且z索引大於地圖。

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

生活。

Answer 2

這是工作小提琴鏈接

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;   
});

工作小提琴