z-index:0 与 z-index:auto(默认值)是有区别的

转载 2016年08月28日 20:29:40

z-index:0 的会创建一个新的层叠上下文
而auto 不会,两者在有区别
(0 会在auto 上面)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
<div class="abc">
  <span class="red2">Red2</span>
  <span class="green">Gree2</span>
  <span class="red">Red1</span>
</div>

<style>


  .red, .green, .red2 {

    width: 200px;
    height: 200px;
  }

  .red {
    position: absolute;
    z-index: 0;
    top: 100px;
    left: 100px;;

    background: red;
    z-index: 1111;
  }

  .red2 {
    position: absolute;
    z-index: 0;

    background: red;
    z-index: 1111;
  }

  .green {
    position: absolute;
    z-index: auto;
    top: 40px;
    left: 40px;;
    background: green;
  }

</style>
</body>
</html>

参考文档http://www.w3cplus.com/css/what-no-one-told-you-about-z-index.html

z-index和transform,你真的了解吗?

z-index和transform是CSS中的属性,但很少同学将二者联系到一起,感觉他们八杆子打不上。事实真的是这样吗?如果你也不能确认,这篇文章就值得你花点时间阅读。因为阅读完了,你会有所收获的。 ...
  • fanhu6816
  • fanhu6816
  • 2016年09月13日 10:40
  • 1678

z-index无效,无论设置多大都被其他的元素覆盖

z-index问题 .test-div{ border:1px blue solid; width:300px...
  • zhu562002124
  • zhu562002124
  • 2015年09月18日 13:55
  • 9179

详解CSS的z-index属性(带图片解析)

个人总结的CSS的z-index属性,很通俗易懂,有图解说明。
  • qiushi_1990
  • qiushi_1990
  • 2014年11月02日 22:05
  • 3757

关于IE7 z-index问题完美解决方案

浏览器兼容性问题太让人蛋疼了,今天可是废在了IE7的z-index问题上。可又不能因为浏览器版本低而不去解决,毕竟要从用户的角度着想。百度了好多还是无法解决,最后google了一下,找到了方法。 ...
  • heirenheiren
  • heirenheiren
  • 2013年10月10日 11:23
  • 3546

IE下 z-index 的各种坑

到新地方有些日子了,差不多适应了这边的工作节奏与流程。接到的第一个开发任务是几个比较简单的页面,需要做的工作就是先把设计图变成页面,然后使用PHP创建几个请求的接口传递数据,标准且简洁的web开发思路...
  • nhconch
  • nhconch
  • 2013年06月22日 15:53
  • 1773

元素重叠及position定位的z-index顺序

多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题。其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题...
  • woshinannan741
  • woshinannan741
  • 2015年12月08日 19:37
  • 1092

z-index无效,无论设置多大都被其他的元素覆盖

z-index问题 .test-div{ border:1px blue solid; width:300px...
  • zhu562002124
  • zhu562002124
  • 2015年09月18日 13:55
  • 9179

ie7下z-index失效问题解决方法(详细分析)

绝对定位元素的“有定位属性(relative或absolute)的父元素”在渲染层次时起到了主要作用,前面的被后面的覆盖了。解决办法就是给有定位属性的父元素设置z-index 解决办法: 父级元素加上...
  • summergreenhtml
  • summergreenhtml
  • 2015年09月16日 14:20
  • 259

2.8 CSS相对定位&&绝对定位&&固定定位&&z-index

相对定位:position:relative;绝对定位:position:absolute;固定定位:position:fixed;相对定位相对自己原来的位置,进行位置调整。相对定位不脱标用途: ...
  • a1837634447
  • a1837634447
  • 2017年05月04日 23:47
  • 192

CSS教程:彻底掌握Z-index属性

大多数的CSS属性都很容易使用。常常,当您对标记语言的元素使用CSS属性时,产生的结果会随着您刷新页面而立即呈现。而另一些CSS属性,却会有一些复杂,且只能在给定的环境下才会工作。 Z-inde...
  • Iamduoluo
  • Iamduoluo
  • 2011年10月25日 11:15
  • 567
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:z-index:0 与 z-index:auto(默认值)是有区别的
举报原因:
原因补充:

(最多只允许输入30个字)