专栏首页gojam技术备忘录移动端Safari对z-index与绝对定位的不佳处理

移动端Safari对z-index与绝对定位的不佳处理

我尝试用z-index和绝对定位结合做一个时光轴,但在IOS设备上的表现很差:尽管我滑动了页面,时光轴相对屏幕的位置仍然不变(但时光轴的父元素已经设定了relative)。这还和放在overflow:scroll容器里有关,总之满足以上3点才会100%触发这个bug。我不清楚web标准是否应该这么呈现,但估计是Safari自身的原因。说不定是因为内容放在了容器里,容器内的scroll不会触发safari对这种元素重新渲染。

解决方案就不用z-index,通过改变元素在html中的排列顺序实现z-index的效果(同一级元素中后面的元素会覆盖前面的元素)。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CSS一个div内两个子元素的高度自适应

    3-1-2019更新:使用flex布局,align-items:flex-start即可。

    gojam
  • Pseudo elements伪元素与Pseudo classes伪类

    ::after用于描述处于css渲染层的一个伪元素,相当于选中元素的最后一个子元素,但这个元素与DOM节点无关,位于选择的元素之后,伪元素的内容用content...

    gojam
  • 外边距折叠(Margin collapsing)笔记?

    外边距折叠是指有时候上边距与下边距坍缩成较大的那一个边距的行为。它只会发生在同一BFC的块级元素间,并且永远不会发生在浮动元素或绝对定位元素间。

    gojam
  • CSS3

    http://caniuse.com/ 1、私有前缀及其用法 .round{ -khtml-border-radius: 10px; / Konqueror /...

    py3study
  • 04-老马jQuery教程-DOM节点操作及位置和大小

    1. jQuery创建DOM标签 1.1 DOM动态创建标签的方法 DOM时代我们通过document的createElement方法动态创建标签。创建标签后,...

    老马
  • HTML,login文本框·

    Wyc
  • IE6下的png透明图片的背景定位

    在IE6下PNG透明图片做背景,无法使用background-position进行定位。但是可以使用margin和绝对定位来进行。 另外,由于IE6下的 :ho...

    欲休
  • 人类,不要气馁 | 从李世石连败谷歌人工智能看中国制造2025

    编者按:今天李世石同学又输了,感觉这个曾经的“不败少年”即将成为让广大网友集体心疼的第二个小李子。那个小李子已经拿着奥斯卡逆袭成功了,这个小李子前方的道路依然曲...

    CDA数据分析师
  • 博弈论(一)——产品小哥哥的民主妙计

    “作为一个产品,一定要与开发一起对项目有深入的沟通和交流,才能让项目做的更好。所以,今天我们来做一个不记名投票,确定哪几位同学可以和我一起讨论产品的设计方向。”

    青南
  • 搞定参考基因组,只需要五秒钟(序列相似性搜索工具—UCSC BLAT)

    看我如何用5个小时才解决了Jimmy老师5秒钟就帮我搞定的问题~ 作为学徒的我这两天在跑Jimmy老师给的ATAC测试数据

    生信技能树

扫码关注云+社区

领取腾讯云代金券