收藏
回答

【bug】map中cover-view层级问题

框架类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
小程序 cover-view 客户端 6.6.1 1.9.1


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容器对调,真机上表现一致了,但是这和语义不一致。治标不治本。@官方

最后一次编辑于  2018-02-02
回答关注问题邀请回答
收藏

2 个回答

  • 墨
    2018-08-06

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


    2018-08-06
    有用
    回复 1
    • 棉花糖
      棉花糖
      2018-08-22

      这个目前还没遇到过

      2018-08-22
      回复
  • 棉花糖
    棉花糖
    2018-04-09

    @官方

    cover-view的层级问题

    2018-04-09
    有用
    回复
登录 后发表内容