map中两个cover-view是兄弟元素,第一个cover-view的z-index高于第二个的,但是真机上无效。
具体demo如下:
< map class = "map" > < cover-view class = "top" >top
|
/*测试z-index层级问题 */ /* .map-box { position: relative; top: 50rpx; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; } */ .map{ width : 100% ; height : 500 rpx;} . top { width : 100 rpx; height : 100 rpx; position : fixed ; top : 100 rpx; left : 150 rpx; 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 : 200 rpx; height : 200 rpx; position : fixed ; top : 250 rpx; z-index : 22 ; background : #fbfbfb ; } |
演示如下:
左边是开发者工具演示,右边是真机上演示,top的层级设置高于mask的,但是真机上无效。
假如我吧top和mask容器对调,真机上表现一致了,但是这和语义不一致。治标不治本。@官方
有没有出现过opacity真机失效问题?
这个目前还没遇到过
@官方
cover-view的层级问题