iOS手机定位层级问题

iOS手机定位层级问题

iOS手机定位层级问题

• • 现象
  • 来源

现象

在iOS手机app内或者Safari浏览器中定位的元素设置很高的层级eg:9999, 想实现的最上层的效果，例如代码：

<div style="position: relative"><div style="position: relative" class="top"><div></div></div><div style="position: absolute; z-index:9999" class="bottom"><div></div></div>
</div>

此时你的预料效果是bottom元素在top元素上面，因为按理说非static的定位比较的是同级的层级大小（子元素比较层级先比较父元素层级大小），所以会出现预料的效果，然而在iOS上却不是的。
解决办法，增加z-index,示例代码如下：

<div style="position: relative"><div style="position: relative; z-index: 1" class="top"><div></div></div><div style="position: absolute; z-index:9999" class="bottom"><div></div></div>
</div>

来源

问题发现于公司开源的UI框架，在内部使用时发现轮播图插件下方对应轮播索引的按钮没有显示。