最新消息: 电脑我帮您提供丰富的电脑知识,编程学习,软件下载,win7系统下载。

iOS手机定位层级问题

IT培训 admin 16浏览 0评论

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框架,在内部使用时发现轮播图插件下方对应轮播索引的按钮没有显示。

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框架,在内部使用时发现轮播图插件下方对应轮播索引的按钮没有显示。

与本文相关的文章

发布评论

评论列表 (0)

  1. 暂无评论