mui-bar-footer被内容遮住了，怎么才能实现最上方显示？

分类：HBuilder

mui-bar-footer不能最上方显示，同样代码，换成mui-bar-nav，显示没有问题。麻烦帮看看，要怎么做？

CSS已经重写了在min.css上了：
.mui-bar-footer{
height: 38px;
z-index: 999;
position: absolute;
width: 70%;
left: 15%;
background-color: rgba(200,200,200,.2);
border-radius: 10px;
}

下面是页面代码：

<body>
<footer id="footerBar" class="mui-bar mui-bar-footer">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<a class="mui-icon mui-icon-forward mui-pull-right" id="go_forward"></a>
<h1 class="mui-title" id="close_page">footer</h1>
</footer>
<script type="text/javascript">
mui.init();
mui.plusReady(function(){
var self = plus.webview.currentWebview();
var baiduWV = plus.webview.create("http://www.baidu.com", "baidu", {
top: "0px",
bottom: "28px",
});
self.append(baiduWV);
var old_back = mui.back;
// 然后进行重写
mui.back = function() {
baiduWV.canBack(function(event) {
var canBack = event.canBack;
if(canBack) {
baiduWV.back();
} else {
alert("到头了，要关闭页面了！");
// 执行重写前的back方法
old_back();
}
});
};
// 右上角前进icon的事件
document.getElementById("go_forward").addEventListener("tap", function() {
baiduWV.canForward(function(event) {
var canForward = event.canForward;
if(canForward) {
baiduWV.forward();
} else {
alert("不能前进！");
}
});
});
// 头部文字的事件
document.getElementById("close_page").addEventListener("tap", old_back);
});
</script>
</body>