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 相关文章推荐
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
Jan 23 HTML / CSS
CSS3提交意见输入框样式代码
Oct 30 HTML / CSS
CSS3 text shadow字体阴影效果
Jan 08 HTML / CSS
详解CSS3中的box-sizing(content-box与border-box)
Apr 19 HTML / CSS
html5 touch事件实现触屏页面上下滑动(一)
Mar 10 HTML / CSS
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
Jan 09 HTML / CSS
简单介绍HTML5中audio标签的使用
Sep 24 HTML / CSS
Html5 Geolocation获取地理位置信息实例
Dec 09 HTML / CSS
HTML5 localStorage使用总结
Feb 22 HTML / CSS
利用三角函数在canvas上画虚线的方法
Jan 11 HTML / CSS
HTML5 3D旋转相册的实现示例
Dec 03 HTML / CSS
h5页面唤起app如果没安装就跳转下载(iOS和Android)
Jun 03 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
jq的get传参数在utf-8中乱码问题的解决php版
2008/07/23 PHP
php 中英文语言转换类代码
2011/08/11 PHP
PHP实现仿百度文库,豆丁在线文档效果(word,excel,ppt转flash)
2016/03/10 PHP
Laravel 5.5官方推荐的Nginx配置学习教程
2017/10/06 PHP
php上传图片并给图片打上透明水印的代码
2010/06/07 Javascript
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
2012/03/14 Javascript
JS 修改URL参数(实现代码)
2013/07/08 Javascript
地址栏传递中文参数乱码在js里用escape转码
2013/08/28 Javascript
JS倒计时代码汇总
2014/11/25 Javascript
angularjs实现文字上下无缝滚动特效代码
2016/09/04 Javascript
Javascript 对cookie操作详解及实例
2016/12/29 Javascript
jQuery居中元素scrollleft计算方法示例
2017/01/16 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
2017/03/30 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
2017/06/18 Javascript
微信小程序之发送短信倒计时功能
2017/08/30 Javascript
JQuery 又谈ajax局部刷新
2017/11/27 jQuery
微信小程序获取手机系统信息的方法【附源码下载】
2017/12/07 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
2018/08/10 Javascript
4个顶级开源JavaScript图表库
2018/09/29 Javascript
详解vue-router数据加载与缓存使用总结
2018/10/29 Javascript
webpack优化的深入理解
2018/12/10 Javascript
Node.js Windows Binary二进制文件安装方法
2019/05/16 Javascript
Vue 无限滚动加载指令实现方法
2019/05/28 Javascript
Node.js文本文件BOM头的去除方法
2020/11/22 Javascript
简单了解OpenCV是个什么东西
2017/11/10 Python
Python双向循环链表实现方法分析
2018/07/30 Python
在python 不同时区之间的差值与转换方法
2019/01/14 Python
解决python2 绘图title,xlabel,ylabel出现中文乱码的问题
2019/01/29 Python
英国最大的在线照明商店:Litecraft
2020/08/31 全球购物
社区庆八一活动方案
2014/02/02 职场文书
研究生毕业自我鉴定范文
2014/03/27 职场文书
竞聘书模板
2014/03/31 职场文书
创业融资计划书
2014/04/25 职场文书
领导个人查摆剖析材料
2014/10/29 职场文书
2014年维修工作总结
2014/11/22 职场文书
《大禹治水》教学反思
2016/02/22 职场文书