遇到一个问题，在页面上调用百度地图，地图一直显示在最顶层，遮罩也会显示在他下方，我想在调用地图的页面使用Actionsheet菜单，但被遮挡，请大家指点如何处理，谢谢！
点击按钮后Actionsheet显示在了地图的后方，调整z-index无效；
Hbuilder 5.2.0.201501260111版本已经加入了原生的Actionsheet支持，该问题已解决，谢谢！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
}
.mui-bar-nav~.mui-content {
padding: 0;
}
p {
text-indent: 22px;
}
#map {
width: 100%;
position: fixed;
top: 46px;
bottom: 51px;
line-height: 200px;
text-align: center;
background: #FFFFFF;
}
.ipos {
background: no-repeat center center url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAsCAYAAAAn4+taAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAwNC8wMS8xNExYUU4AAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAACTklEQVRoge2YO2gUURSGv7PjEkULO4UoFooIFgtzprAPWMiWKewSTadgYWEhBjHCloGUQtYHaGEjGAQtUmgnZO9YpsqC2NgYIwjRInMscoPrYkzhGTIs8zdnzoP578ewM/eumBmjoMZ+L8BLNUjVVINUTTVI1VSDVE0jA3KgjJuGEE6LyI2iKC6JyBkzWxORF8ADVV0rw1O891ohhCngPnDyL+1PZjabZdkTV1OcQUIIV4CHMf0JvAK+A0eANjAWe1dV9ZGbMY6/kTzPzwHzMV0VkZaqTgLTqjopIi1gNfbnQwhnvbzBEcTMbgFHgXURaRdFsRFCWAa+hhCWi6LYEJE2sB7nbnp5g+9b62KMIU3Tvoh0gQm2Fz0hIt00TftAADCztqO3K8h4jJsAZnZ+sDmQ/wAQkXEc5QnyJcZjACLybLApIk/j5YmheRd5gryLMev1elOqesfMrpvZczO7pqqzvV5vGmgNzbvIDUREXsbLRES6IYTbzWZzMcuyy0mSPA4h3BWRxR3PgXkff6/vSJ7nx83sPXBqoLwJFEACHByofxSRC2mafnYxx/GJxEW9GSofAg7zJwTAa08I8N80doG9HrHx++vvJlcQVV0xs6V/zZjZkqquePpCOdv4OWBrl96WiNwrwdMfJMuyHFjYpb2gqh+8PaG8g9Uc0B+q9WO9FJUCoqrfgBm2X73EOBPrpai0o66qvgU6Me3EvDSVctTdUZIknaIoxhqNRmfv6f+T+1F3vzQy/6LUIFVTDVI11SBVUw1SNdUgVdPIgPwCtt+2JPQRVicAAAAASUVORK5CYII=);
background-size: 50px 44px;
}
</style>
</head>
<body>
<header id="header" class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<a class="mui-icon mui-icon-bars mui-pull-right"></a>
<h1 id="title" class="mui-title">地图</h1>
</header>
<div id="map" class="mui-content">地图加载中...</div>
<nav class="mui-bar mui-bar-tab">
<a id="defaultTab" class="mui-tab-item mui-active" href="#location">
<span class="mui-icon mui-icon-navigate"></span>
<span class="mui-tab-label">定位</span>
</a>
<a class="mui-tab-item" href="#track">
<span class="mui-icon mui-icon-refresh"><span id="count" class="mui-badge">9</span></span>
<span class="mui-tab-label">跟踪</span>
</a>
<a class="mui-tab-item" href="#playback">
<span class="mui-icon mui-icon-loop"></span>
<span class="mui-tab-label">回放</span>
</a>
</nav>
<div id="playback" class="mui-popover mui-popover-action mui-popover-bottom">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<label>开始时间</label>
</li>
<li class="mui-table-view-cell">
<div class="mui-input-row">
<button id="strdate" class="mui-btn" style="width: 45%;">
日期
</button>
<button id="strtime" class="mui-btn" style="width: 45%;">
时间
</button>
</div>
</li>
<li class="mui-table-view-cell">
<label>结束时间</label>
</li>
<li class="mui-table-view-cell">
<div class="mui-input-row">
<button id="enddate" class="mui-btn" style="width: 45%;">
日期
</button>
<button id="endtime" class="mui-btn" style="width: 45%;">
时间
</button>
</div>
</li>
</ul>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a href="#strplayback"><b>确定</b></a>
</li>
</ul>
</div>
<script type="text/javascript" charset="utf-8">
mui.init();
var title = document.getElementById("title");
//选项卡点击事件
mui('.mui-bar-tab').on('tap', 'a', function(e) {
var targetTab = this.getAttribute('href');
if (targetTab == "#location") {
//alert(targetTab);
}else if (targetTab == "#track") {
//alert(targetTab);
}else if (targetTab == "#playback") {
//alert(targetTab);
}
//更换标题
title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;
});
var ws=null,wo=null;
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
if(!em||ws){return};
// 获取窗口对象
ws=plus.webview.currentWebview();
wo=ws.opener();
setTimeout(function(){
map=new plus.maps.Map("map");
map.centerAndZoom(new plus.maps.Point(114.103659,22.562943),15);
createMarker();
// 创建子窗口
//createSubview();
},300);
// 显示页面并关闭等待框
//ws.show("slide-in-right",300);
//wo.evalJS("closeWaiting()");
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
em=document.getElementById("map");
window.plus&&plusReady();
},false);
function userLocation(){
map.showUserLocation( true );
map.getUserLocation(function(state,pos){
if(0==state){
map.setCenter(pos);
}
});
}
function createMarker(){
var marker=new plus.maps.Marker(new plus.maps.Point(114.103659,22.562943));
marker.setIcon("/logo.png");
marker.setLabel("粤B66543");
var bubble = new plus.maps.Bubble("车牌：粤B66543 ");
marker.setBubble(bubble);
map.addOverlay(marker);
};
</script>
</body>
</html>
jody (作者)
非常谢谢！原生的nativeui可以正常显示，但不能达到我要的效果，这个地图非常顽固，死皮赖脸的显示在最顶层，只要有地图，这个页面就干不了其他了；我只是想要展示地图的时候还能做些其他的操作。
2015-01-13 14:41
DCloud_heavensoft
地图是原生控件，层级比dom高。类似于网页里的flash，用div是盖不住的。
2015-01-13 21:06
2***@qq.com
我是侧滑导航被整个地图当着，一直显示最顶层，有解决办法吗？
2018-07-18 17:32