Question

我正在尝试为Google地图构建一个滑动侧面板，并且遇到问题让滑块在地图上显示，同时保持地图可点击。

我能够让面板显示的唯一方法是将地图的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;   
});

Answer 1

要将面板放入堆叠上下文，可以给它一个相对位置（因此将其保持在正常流程中）并且z-index比地图具有更大的值。

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

Live.

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

Working Fiddle

在Twitter Bootstrap中滑动侧面板z-index问题

2 个答案: