您现在的位置是:网站首页> 编程资料编程资料
深入解析CSS中z-index属性对层叠顺序的处理
2021-09-05
711人已围观
简介 这篇文章主要介绍了CSS中z-index属性对层叠顺序的处理,分情况讲解了各种曾跌情况下哪个box更靠近用户,需要的朋友可以参考下
多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题。其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题却不大了解其原因,导致重复出错......于是决定把重叠问题弄清下,把z-index理顺下。
经过一番查找对比实践理解,下面就从元素重叠的背景常识及可能原因说起,浅谈下position定位元素的z-index顺序。总结下我目前的理解,希望也能对遇到过类似问题有同样疑惑的你有一点帮助或启发。
元素位置重叠的背景常识
(x)html文档中的元素默认处于普通流(normal flow)中,也就是说其顺序由元素在文档中的先后位置决定,此时一般不会产生重叠(但指定负边距可能产生重叠)。当我们用css为某个元素指定float浮动或者position定位后,元素的定位将会依情况发生如下改变:
1. 指定float值left/right
行内元素也会隐形变成块元素,元素会脱离文档的普通流,向左或右浮动,直到其外边缘碰到包含框或另一个浮动框。
2. 指定position值relative
可以相对于其在普通流中的位置偏移,原本所占的空间仍保留。
3. 指定position值absolute
行内元素也会隐形变成块元素,元素会脱离文档的普通流,相对于最近的已定位祖先元素偏移,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块偏移。
4. 指定position值fixed
元素会脱离文档的普通流,相对于浏览器窗口偏移,固定在浏览器的某个位置。
以上四种情况下,文档中的元素都将可能被浮动/定位元素覆盖产生重叠。
元素位置重叠的可能原因
1. 负边距/float浮动
margin为负值时元素会依参考线向外偏移。margin-left/margin-top的参考线为左边的元素/上面的元素(如无兄弟元素则为父元素的左内侧/上内侧),margin-right和margin-bottom的参考线为元素本身的border右侧/border下侧。一般可以利用负边距来就行布局,但没有计算好的话就可能造成元素重叠。堆叠顺序由元素在文档中的先后位置决定,后出现的会在上面。
浮动元素会脱离文档的普通流,有可能覆盖或遮挡掉文档中的元素。
2. position的relative/absolute/fixed定位
当为元素设置position值为relative/absolute/fixed后,元素发生的偏移可能产生重叠,且z-index属性被激活。z-index值可以控制定位元素在垂直于显示屏方向(Z 轴)上的堆叠顺序(stack order),值大的元素发生重叠时会在值小的元素上面。
3. window窗口元素引发的重叠
浏览器解析页面时,先判断元素的类型:窗口元素优于非窗口元素显示(也就是窗口元素会覆盖在其它非窗口元素之上),同为非窗口类型才能在激活z-index属性控制堆叠顺序。
Flash元素属于window窗口元素
所以如果页面上flash元素和其他元素发生重叠,需要先将flash嵌入的wmode属性的window(窗口,默认的会造成上面所说的问题)改为非窗口模式:opaque(非窗口不透明)或者 transparent(非窗口透明)。
ie6下select属于window类型控件
同理,它也产生窗口元素的遮挡问题。解决方法使用iframe(原理:ie6下普通元素无法覆盖select,iframe可以覆盖select,普通元素可以覆盖iframe)/用div模拟实现select的效果。我一般会为被select遮挡的div在内部追加(appendChild)一个空的子iframe,设置position:absolute脱离文档流空间、width:100%;height:100%;覆盖整个父div、z-index:-1;确保值要小于父div的z-index值让父div覆盖显示在iframe上面,借助这个iframe来覆盖select。
浅说position定位及z-index使用
使用前提
z-index只能在position属性值为relative或absolute或fixed的元素上有效。
基本原理
z-index值可以控制定位元素在垂直于显示屏方向(Z 轴)上的堆叠顺序(stack order),值大的元素发生重叠时会在值小的元素上面。
使用的相对性
z-index值只决定同一父元素中的同级子元素的堆叠顺序。父元素的z-index值(如果有)为子元素定义了堆叠顺序(css版堆叠“拼爹”)。向上追溯找不到含有z-index值的父元素的情况下,则可以视为自由的z-index元素,它可以与父元素的同级兄弟定位元素或其他自由的定位元素来比较z-index的值,决定其堆叠顺序。同级元素的z-index值如果相同,则堆叠顺序由元素在文档中的先后位置决定,后出现的会在上面。
所以如果当你发现一个z-index值较大的元素被值较小的元素遮挡了,请先检查它们之间的dom结点关系,多半是因为其父结点含有激活并设置了z-index值的position定位元素。
也因为这个相对性,还会引发浏览器表现不一致出现兼容问题。原因是ie6、7下面position值为非static的元素在未设置z-index值的情况下都会被隐含添加z-index:0,而Firefox/Chrome等现代浏览器会遵循标准默认z-index:auto不会产生值。
还有一点需要注意,负值的z-index也依照大小比较的原理,但一般来说负值的z-index会被透明的body覆盖导致点击等事件响应出现问题,请谨慎使用。
图解分层显示
其实我们常接触到的z-index只是分层显示中的一个属性而已,而理解z-index背后的原理实质上就是要理解分层显示原理。下面我们通过一个示例来认识一下分层显示涉及的对象和属性(z-axis、(root) stacking context、box、stack level)以及它们之间的关系。
HTML Markup
说明:
1. 在构造渲染树时会为element生成对应的box,所以div#d1->d1:box,div#d2->d2:box,div#d3->d3:box,div#d4->d4:box,p#p1->p1:box。
2. 对于positioned box而言,若z-index属性值不是0,则会创建一个新的stacking context,并且其子孙box将属于这个新stacking context。
3. 同一个stacking context的z-index才具有可比性,也就是说在讨论z-index时必须带说明是哪个stacking context下的z-index。如示例般,虽然-9999比10小,但由于d4:box和d1:box位于不同的stacking context,因此无法判断哪个box更靠近用户。
层叠规则
层叠规则就是决定到底哪个box更靠近用户。
1. 前提:boxes属于同一个stacking context,并且z-index相同
规则:按照box对应的element在文档树的顺序,后者比前者更靠近用户(back-to-front)
- "d1">"d2">
- "d1">
- "d2">
2. 前提:boxes属于同一个stacking context,并且z-index不同
规则:z-index属性值大的box更靠近用户
- "d1" style="position:relative;z-index: 12;">
- "d2" style="z-index: 0;margin-top:-20px;">
3. 前提:boxes属于不同的stacking context,并且stacking contexts没有祖孙/父子关系
规则:boxes会向上沿着父box进行搜索,直到父boxes属于同一个stacking context为止,然后比较父boxes的z-index属性值,z-index属性值大的box更靠近用户。
- "d1" style="position:relative; z-index:10;">"d4" style="background:red; width:100px; height:100px;position:relative; z-index:9999;">d3"d2" style="background:blue; width:50px; height:50px; position:relative; top: -120px; z-index:9;">d2"d3" style="background:green; width:50px; height:50px; position:relative; top: -80px; position:relative; z-index:11;">d3
4. 前提:boxes属于不同的stacking context,并且stacking contexts为祖孙/父子关系
规则:属于子stacking context的box必定更靠近用户
- "background:blue; width:100px; height:100px; position:relative; z-index:10;">"background:red; width:50px; height:50px; position:relative; z-index:-10;">
z-index的作用
相关内容
- CSS编写时的高性能以及高维护性代码优化建议总结CSS代码编写的一些性能优化技巧总结网站性能优化之CSS无图片技术CSS优化总结——网络性能与语法性能建议 CSS 网站性能优化笔记对css性能优化的一点看法JavaScript和CSS的优化提高网站性能CSS性能优化提高css性能的方法
- CSS自定义绿色复选框按钮样式HTML+CSS实现单选框、复选框美观的样式利用CSS3实现单选框动画特效示例代码纯css3实现效果超级炫的checkbox复选框和radio单选框CSS3实例分享--超炫checkbox复选框和radio单选框CSS3实现的表单单选框、复选框特效CSS3实现复选框动画特效示例代码 使用CSS实现页面复选框的方法纯CSS实现自定义单选框和复选框功能
- CSS定位“十字架”之水平垂直居中利用CSS3的flexbox实现水平垂直居中与三列等高布局Flexbox制作CSS布局实现水平垂直居中的简单实例浅析CSS实现水平垂直同时居中的5种思路让DIV水平垂直居中的两种完美方法推荐CSS解决页面图片水平垂直居中问题的方法全面总结使用CSS实现水平垂直居中效果的方法HTML对于元素水平垂直居中的探讨关于html水平垂直居中的问题小结DIV或者DIV里面的图片水平与垂直居中的方法
- CSS3哪些新特性值得称赞 结合CSS3的布局新特征谈谈常见布局方法
- 基于DOM+CSS3实现OrgChart组织结构图插件 css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果
- 基于CSS3实现立方体自转效果 纯CSS3实现的3D立方体旋转动画特效源码HTML5/CSS3实现的立方体翻转3D全屏焦点图特效源码采用CSS3实现的表面颜色可渐变3D立方体动画特效源码彩色3D立方体扭曲CSS3动画可在不同角度扭曲、放大和缩小css3 transform 3d 使用html5+css3创建动态旋转的3d立方体css3 transform 3d 使用css3创建动态3d立方体(html5实践)
- CSS3中几个新增加的盒模型属性使用教程css3弹性盒模型(Flexbox)详细介绍css3弹性盒模型实例介绍深入讲解CSS中盒模型的用法3DSMAX打造漂亮的花瓣型纸盒模型教程css盒模型和块级、行内元素深入理解CSS 盒模型(Box Model)的学习和理解CSS 盒模型、块状元素与内联元素、CSS选择器CSS教程之CSS盒模型CSS教程:通过实例学习和理解CSS盒模型CSS网页布局的核心内容:CSS盒模型
- CSS代码编写中视觉格式化模型的学习教程深入讲解CSS中盒模型的用法详解CSS中的Box Model盒属性的使用CSS设置div对象盒子里部分文字加粗的实例介绍css3弹性盒模型(Flexbox)详细介绍css盒子模型图解css盒子模型详解加示例css3弹性盒模型实例介绍css盒模型和块级、行内元素深入理解CSS 理解盒子模型css的核心内容 标准流、盒子模型、浮动、定位等分析
- CSS布局之圣杯布局与双飞翼布局 浅谈css双飞翼布局和圣杯布局CSS的三列式"圣杯布局"方案完全解析面试必问:圣杯布局和双飞翼布局的区别
- CSS Sprites雪碧图技术基础学习指南详解CSS Sprite雪碧图的应用