客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
|
最近在学习层叠上下文，学习的过程中对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>
这段代码的结果是: 可以看到蓝色元素覆盖在了红色元素上方，交换红蓝元素块在文档中的顺序为 <div class="blue">index-auto</div> <div class="red"> index-0 </div> 可以得到 这时红色元素又覆盖在蓝色元素之上。可以得出z-index取值0或auto对元素在层叠上下文中的排列顺序并没有影响。 当没有指定z-index的时候， 所有元素都在会被渲染在默认层(0层)。 也就是auto和0是同一层。
<div class="green">不设置z-index</div>
.green {
position: absolute;
top: 160px;
left: 160px;
background: greenyellow;
}
这时页面长这样。 绿色没有设置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;
}
这时候页面长这样 灰色测试块被蓝色和绿色块所覆盖。 z-index: auto不创建层叠上下文那么现在将这个测试元素放在蓝色块里试一试呢？(蓝色元素的z-index值为auto) 可看到灰色元素展示在所有元素的最上层，z-index值生效了！这个时候test元素隶属于根元素创建的层叠上下文（在层叠上下文的层次结构中，没有创建层叠上下文的元素同其父级处于一个层叠上下文。蓝色块没有创建层叠上下文，与其父元素也就是根元素是同一个层叠上下文）。红色元素也属于根元素创建的层叠上下文，但是红色元素z-index为0，0小于10，因此灰色块在上。 总结
到此这篇关于css中z-index: 0和z-index: auto的区别 的文章就介绍到这了,更多相关z-index: 0和z-index: auto 区别 内容请搜索极客世界以前的文章或继续浏览下面的相关文章，希望大家以后多多支持极客世界！ |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
六六分期app的软件客服如何联系？不知道吗？加qq群【895510560】即可！标题：六六分期
今天小编告诉大家如何处理win10系统火狐flash插件总是崩溃的问题，可能很多用户都不知
今天小编告诉大家如何对win10系统删除桌面回收站图标进行设置，可能很多用户都不知道
今天小编告诉大家如何对win10系统电脑设置节能降温的设置方法，想必大家都遇到过需要
我们在使用xp系统的过程中,经常需要对xp系统无线网络安装向导设置进行设置，可能很多
今天小编告诉大家如何处理win7系统玩cf老是与主机连接不稳定的问题，可能很多用户都不
电脑对日常生活的重要性小编就不多说了，可是一旦碰到win7系统设置cf烟雾头的问题，很
我们在日常使用电脑的时候，有的小伙伴们可能在打开应用的时候会遇见提示应用程序无法
今天小编告诉大家如何对win7系统打开vcf文件进行设置，可能很多用户都不知道怎么对win
今天小编告诉大家如何对win10系统s4开启USB调试模式进行设置，可能很多用户都不知道怎
请发表评论