z-index part3

  • 不支持z-index的层叠上下文元素的层叠顺序均是z-index: auto级别
Paste_Image.png
  • 依赖z-index的层叠上下文元素的层叠顺序取决于z-index值
  • position值为relative/absolute或fixed(部分浏览器）
  • display:flex|inline-flex容器的子flex项 (但是该元素还是普通元素，并不是z-index的容器)
Paste_Image.png

Paste_Image.png
  • 做动画的时候，如果用opacity来做动画， 会出现，动画完成之后， 文字才出现
Paste_Image.png

Paste_Image.png

z-index 原则

  1. 最小化影响 （看relative 那一章， 专门创建一个div来做zindex容器）

  2. 不犯二原则 （不是浮层元素，不要使用大于2 的z-index）
    首先要避免设置z-index。
    灵活运用 层叠顺序，后来居上， 层叠水平

  3. 组件层级计数器
    用js获取当前最大的z-index值再加一

  4. 可访问性隐藏
    用z-index 来隐藏元素。 人看不见，但是其他设备可以发现

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • z-index的理解
    第一节：z-index基础 较大的z-index会覆盖较小的那个z-index元素 z-index:auto 默认...
    胖鱼尾巴阅读 1,074评论 0赞 0
  • Css专题总结
    选择qi：是表达式 标签选择器 类选择器 属性选择器 继承属性： color，font，text－align，li...
    love2013阅读 2,357评论 0赞 11
  • Css专题总结
    选择qi：是表达式 标签选择器 类选择器 属性选择器 继承属性： color，font，text－align，li...
    wzhiq896阅读 1,832评论 0赞 2
  • CSS理解之z-index
    1.z-index基础 z-index属性指定了元素及其子元素的[z顺序]，而[z顺序]可以决定当元素发生覆盖的时...
    徐国军_plus阅读 6,469评论 1赞 6
  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,865评论 1赞 92