Javascript 推特引导中的滑动侧面板z索引问题

我正在尝试为谷歌地图构建一个滑动侧面板，但在让滑块显示在地图上的同时保持地图的可点击性方面遇到了问题

我能够让面板显示的唯一方法是将地图的Z索引设置为负数，这使得它不可读取。如何使面板滑出地图，同时保持地图的互动性

HTML:

JS:

---

要将面板放入堆叠上下文中，可以为其指定一个相对位置（从而使其保持在正常流程中）和大于贴图的z索引

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

---

这里是工作小提琴链接

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

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

#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 */ 
}

$('#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;   
});