css中z-index: 0和z-index: auto的区别


Posted in HTML / CSS onAugust 23, 2021

最近在学习层叠上下文,学习的过程中对z-index为0和为auto有什么区别产生了疑问,于是去百度查了一下资料。发现了一些问题,结合自己的实践(实验?)整理出了这篇笔记。

勘误

查资料时发现有一种说法是z-index为0是会创建新的层叠上下文,0会在auto上面。后半句话是错误的,z-index: 0与z-index不设置,也就是z-index: auto在同一层级内没有高低之分,文档流中后出现的会覆盖先出现的。

设置z-index: 0或z-index: auto,文档流中后出现的会覆盖先出现的。

来做一些小实验

<!DOCTYPE html>
<html>
<head>
  <title>z-index为0或auto</title>
  <style>
    .red,
    .blue{
      width: 200px;
      height: 200px;
    }

    .red {
      position: absolute;
      z-index: 0;
      top: 100px;
      left: 100px;
      background: #FF0000;
    }
    .blue {
      position: absolute;
      z-index: auto;
      top: 40px;
      left: 40px;
      background: #0000FF;
    }
  </style>
</head>

<body>
  <div class="red">
    index-0
  </div>
  <div class="blue">index-auto</div>
</body>
</html>

这段代码的结果是:

css中z-index: 0和z-index: auto的区别

可以看到蓝色元素覆盖在了红色元素上方,交换红蓝元素块在文档中的顺序为

<div class="blue">index-auto</div>
<div class="red">
  index-0
</div>

可以得到

css中z-index: 0和z-index: auto的区别

这时红色元素又覆盖在蓝色元素之上。可以得出z-index取值0或auto对元素在层叠上下文中的排列顺序并没有影响。
除次之外,我还在MDN文档中看到了这样一句话:

当没有指定z-index的时候, 所有元素都在会被渲染在默认层(0层)。

也就是auto和0是同一层。
再来给上面的代码在蓝色块后面新增一个绿色的块。

<div class="green">不设置z-index</div>
 
.green {
  position: absolute;
  top: 160px;
  left: 160px;
  background: greenyellow;
}

这时页面长这样。

css中z-index: 0和z-index: auto的区别

绿色没有设置z-index值。一般浏览器position不为static,且不设置z-index时,z-index为auto,IE6/7下z-index为0。
绿色作为最后出现的元素,覆盖了蓝色和红色两个元素。

z-index: 0创建了层叠上下文

现在我们来验证红色元素因为z-index:0产生了层叠上下文。在红色元素里添加测试元素

<div class="test"></div>
 
.test {
  width: 140px;
  height: 140px;
  position: absolute;
  right: 0px;
  top: 0px;
  background: grey;
  z-index: 10;
}

这时候页面长这样

css中z-index: 0和z-index: auto的区别

灰色测试块被蓝色和绿色块所覆盖。
显然易见,即使test元素的z-index为10,也无法展示在层叠上下文的最上层。因为test隶属于它的父元素red创建的层叠上下文。当一个元素产生了层叠上下文,其子级层叠上下文的z-index值只在父级中才有意义。所有灰色块的z-index只在红色块里生效。

z-index: auto不创建层叠上下文

那么现在将这个测试元素放在蓝色块里试一试呢?(蓝色元素的z-index值为auto)

css中z-index: 0和z-index: auto的区别

可看到灰色元素展示在所有元素的最上层,z-index值生效了!这个时候test元素隶属于根元素创建的层叠上下文(在层叠上下文的层次结构中,没有创建层叠上下文的元素同其父级处于一个层叠上下文。蓝色块没有创建层叠上下文,与其父元素也就是根元素是同一个层叠上下文)。红色元素也属于根元素创建的层叠上下文,但是红色元素z-index为0,0小于10,因此灰色块在上。

总结

  • 不设置z-index值时,默认是auto。默认层也就是0层。
  • z-index: 0 与没有定义 z-index 也就是z-index: auto在同一层级内没有高低之分,文档流中后出现的会覆盖先出现的。
  • z-index: 0 会创建层叠上下文z-index: auto不会创建层叠上下文。

到此这篇关于css中z-index: 0和z-index: auto的区别 的文章就介绍到这了,更多相关z-index: 0和z-index: auto 区别 内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木! 

 
HTML / CSS 相关文章推荐
需要知道的CSS3动画技术
Jan 01 HTML / CSS
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
Dec 28 HTML / CSS
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
May 07 HTML / CSS
html5理解head_动力节点Java学院整理
Jul 13 HTML / CSS
html5 canvas-2.用canvas制作一个猜字母的小游戏
Jan 07 HTML / CSS
HTML5视频支持检测(检查浏览器是否支持视频播放)
Jun 08 HTML / CSS
详解HTML5中div和section以及article的区别
Jul 14 HTML / CSS
HTML5进阶段内联标签汇总(小篇)
Jul 13 HTML / CSS
HTML5 LocalStorage 本地存储详细概括(多图)
Aug 18 HTML / CSS
萌新HTML5 入门指南(二)
Nov 09 HTML / CSS
bootstrapv4轮播图去除两侧阴影及线框的方法
Feb 15 HTML / CSS
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
Dec 24 HTML / CSS
CSS Transition通过改变Height实现展开收起元素
Aug 07 #HTML / CSS
css3中transform属性实现的4种功能
Aug 07 #HTML / CSS
从QQtabBar看css命名规范BEM的详细介绍
Aug 07 #HTML / CSS
css实现两栏布局,左侧固定宽,右侧自适应的多种方法
Aug 07 #HTML / CSS
CSS 实现Chrome标签栏的技巧
纯html+css实现Element loading效果
纯html+css实现奥运五环的示例代码
You might like
提升PHP执行速度全攻略(下)
2006/10/09 PHP
PHP计算一年多少个星期和每周的开始和结束日期
2014/07/01 PHP
php获取根域名方法汇总
2014/10/28 PHP
php+mysql实现无限级分类
2015/11/11 PHP
php curl模拟post请求和提交多维数组的示例代码
2015/11/19 PHP
Yii实现单用户博客系统文章详情页插入评论表单的方法
2015/12/28 PHP
PHP缓存工具XCache安装与使用方法详解
2018/04/09 PHP
用js实现随机返回数组的一个元素
2007/08/13 Javascript
分享10篇优秀的jQuery幻灯片制作教程及应用案例
2011/04/16 Javascript
正则表达式搭配js轻松处理json文本方便而老古
2013/02/17 Javascript
js实现的map方法示例代码
2014/01/13 Javascript
基于jquery实现的鼠标悬停提示案例
2016/12/11 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
2016/12/14 Javascript
在javascript中,null>=0 为真,null==0却为假,null的值详解
2017/02/22 Javascript
基于js的变量提升和函数提升(详解)
2017/09/17 Javascript
详谈DOM简介及节点、属性、查找节点的方法
2017/11/16 Javascript
用p5.js制作烟花特效的示例代码
2018/03/21 Javascript
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
2018/07/24 Javascript
Vue-Router的使用方法
2018/09/05 Javascript
vue favicon设置以及动态修改favicon的方法
2018/12/21 Javascript
JS原生瀑布流效果实现
2019/04/26 Javascript
layui多图上传实现删除功能的例子
2019/09/23 Javascript
微信浏览器左上角返回按钮监听的实现
2020/03/04 Javascript
Python数组条件过滤filter函数使用示例
2014/07/22 Python
Python中的Classes和Metaclasses详解
2015/04/02 Python
在Python中使用PIL模块处理图像的教程
2015/04/29 Python
python匿名函数的使用方法解析
2019/10/10 Python
python 解决函数返回return的问题
2020/12/05 Python
python 如何把docker-compose.yaml导入到数据库相关条目里
2021/01/15 Python
M1芯片安装python3.9.1的实现
2021/02/02 Python
html2 canvas生成清晰的图片实现打印功能
2019/09/23 HTML / CSS
Bonami斯洛伐克:购买家具和家居饰品
2019/07/02 全球购物
关于国庆节的演讲稿
2014/09/05 职场文书
社区领导班子四风问题原因分析及整改措施
2014/09/28 职场文书
2015年惩防体系建设工作总结
2015/05/22 职场文书
2016高考冲刺决心书
2015/09/23 职场文书