【bug】map中cover-view层级问题
发布于 6 年前 作者 chaoyuan 10135 次浏览 来自 问答

map中两个cover-view是兄弟元素，第一个cover-view的z-index高于第二个的，但是真机上无效。

具体demo如下：

<map class="map">
 <cover-view class="top">topcover-view>
 <cover-view class="mask">maskcover-view>
 <cover-view class="bottom">bottomcover-view>
map>
/*测试z-index层级问题  */
/* .map-box {
 position: relative;
 top: 50rpx;
 right: 0;
 bottom: 0;
 left: 0;
 width: 100%;
 height: 100%;
} */
.map{ width: 100%; height: 500rpx;}
.top{
 width: 100rpx;
 height: 100rpx;
 position: fixed;
 top: 100rpx;
 left: 150rpx;
 z-index: 222;
 background: #fff;
}
.mask{
  position: fixed;
 top: 0;
 left: 0;
 bottom: 0;
 z-index: 1;
 width: 100%;
 height: 100%;
 background: #000;
 opacity: .25;
}
.bottom{
 width: 200rpx;
 height: 200rpx;
 position: fixed;
 top: 250rpx;
 z-index: 22;
 background: #fbfbfb;
}

演示如下：

左边是开发者工具演示，右边是真机上演示，top的层级设置高于mask的，但是真机上无效。

假如我吧top和mask容器对调，真机上表现一致了，但是这和语义不一致。治标不治本。@官方

2 回复

有没有出现过opacity真机失效问题？

@官方

cover-view的层级问题

回到顶部