首页 > 其他分享 >z-index负值深入理解

z-index负值深入理解

时间:2023-02-28 20:33:40浏览次数:35  
标签:index 负值 层叠 元素 深入 position 上下文


补充点小知识:

CSS3与新时代的层叠上下文:

css3之前,可能我们说会影响层叠上下文的也就position属性了,那CSS3时代的到来,对层叠上下文规则带来了新的影响,css3时代会影响层叠上下文的除了定位还有:

  • 元素为flex布局元素(父元素display:flex|inline-flex),同时z-index值不为auto
  • 元素的opacity值不是1
  • 元素transform值不是none
  • 元素的filter值不是none

除了上面的还有别的,这里暂时先提这些哈!

其实我以前没有考虑过z-index负值的情况,也没有用上过,但了解过之后,发现有些时候,z-index设置为负值也还挺好用的,所以自己就查了一些资料,现在整理出来

z-index为负值的最终表现并不一致,它与“层叠上下文”和“层叠顺序”密切相关

层叠上下文和层叠顺序:(下图是来自参考张鑫旭大神的7阶层叠顺序图)

z-index负值深入理解_背景图


在上图中我们也可以看出z-index负值元素的层级是在层叠上下文元素上面、block元素的下面,也就是说z-index虽然名为负数层级,但依然无法突破当前层叠上下文所包裹的小世界

嗯,然后我们看个小例子:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
background:url("3.jpg");
}
</style>
</head>
<body>
<div class="box box1" style="width:200px; height:100px; margin-bottom:10px; ">
<img title="胡歌" src="0.jpg" style="width:200px; height:100px; position:relative; z-index:-1; left:150px;"/>
</div>

<div class="box box2" style="width:200px; height:100px;opacity:0.8;">
<img title="胡歌" src="0.jpg" style="width:200px; height:100px; position:absolute; z-index:-1; left:150px;"/>
</div>
</body>

</html>

在上面的例子中,box1没有创建层叠上下文,而box2我们为其添加了opacity:0.8,根据我前面补充的知识,它是会创建层叠上下文的,所以我们看最后的呈现结果如下图:

z-index负值深入理解_背景图_02

默默的图是背景图,胡歌的图是div的子元素

从上面的图中我们可以明显的看到,第一张是背景图在上面,而第二个是背景图在下,这也就和上面的层叠顺序图相符,即z-index负值应该在层叠上下文元素的背景色之上

注:我测试了为box2设置position:relative;去让box2创建层叠上下文,但此时背景图还是在上面,并不能达到上面的效果,我想了想,推测是因为我们之前说过,当我们为元素设置为定位(除position:static外),即便我们不为其添加z-index值,它的默认值也为z-index:auto;所以看上面的层叠顺序表也就好解释为什么了

那z-index负值在实际项目中有什么用呢?

  • 可访问性隐藏

z-index负值可以隐藏元素,只需要层叠上下文内的某一个父元素加个背景色就可以。它与clip隐藏想必的一个优势是:元素无须绝对定位,设置position:relative就可以隐藏,另一个优势是它对原来的布局以及元素的行为没有任何影响。而clip隐藏会导致空间focus的焦点发生细微的变化,在特定条件下是有体验问题的。它的不足之处就是不具有普遍适用性,需要其他元素配合进行隐藏。


  • 定位在元素的后面:

看一个模拟纸张效果的例子:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边角效果</title>
<style>
.box{
background-color: #666;
width:300px;
height:200px;
position: relative;
z-index: 0;
}
.content{
width:100%;
height:100%;
background-color: #e15671;
position: relative;
}
/*边角卷边阴影*/
.content:before,.content:after{
content: '';
width:90%;
height:20%;
box-shadow:0 8px 16px rgba(0,0,0,.3);
position: absolute;
z-index: -1;
}
.content:before{
transform: skew(-15deg) rotate(-5deg);
transform-origin: left bottom;
left:0;
bottom: 0;
}
.content:after{
transform: skew(15deg) rotate(5deg);
transform-origin: right bottom;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="box">
<div class="content">donna</div>
</div>

</body>

</html>

效果图如下:

z-index负值深入理解_ci_03





标签:index,负值,层叠,元素,深入,position,上下文
From: https://blog.51cto.com/u_15983333/6091778

相关文章

  • css3中的z-index
    元素的层叠黄金准则:1)、谁大谁上:当具有明显的层叠水平标识的时候,如生效的z-index属性值,在同一个层叠上下文领域,层叠水平值大的那一个覆盖小的那一个2)】后来居上:当元素的层叠......
  • 深入分析MobileAI图像超分最佳方案:ABPN
    前言 本文设计一种8-bit量化版高效网络并将其部署到移动端,旨在构建一种实时量化模型用于真实场景(比如实时视频超分)。本文转载自AIWalker来源|HappyAIWalker欢迎关......
  • IaaS--云硬盘(何恺铎《深入浅出云计算》笔记整理)
     【概念】云硬盘,又叫做“云盘”或者“云磁盘”,就是云虚拟机上可以挂载和使用的硬盘。这里,它既包含了用于承载操作系统的系统盘,也包括了承载数据的数据盘。云厂商对于云......
  • 深入理解Spring的Bean定义对象BeanDefinition-面试重点
    Spring注解这篇文章中讲到了Spring的组件,组件加载到Spring容器中也就是Spring容器中的Bean对象,想要更深理解Spring中的Bean对象,那对这个BeanDefinition一定要有深入的了解,......
  • IaaS--云虚拟机(三)(何恺铎《深入浅出云计算》笔记整理)
     云虚拟机收费之省钱办法。 【包年包月】包年包月就是我们要提前预估好自己虚拟机的使用时间,比如半年、一年甚至三年,并提前支付相关款项的一种购买方式。这样的购买......
  • 深入理解JSON对象
    看了js高级程序设计这本书关于json的讲解,下面我把里面我认为比较重要的知识提炼出来,一方面给帮助自己理解,同时也分享给有需要的朋友json:是一种数据格式,不是一种编程语言jso......
  • Indexer
    Indexer是一个用来存储资源对象的内存存储,处理用户的查询是非常快速高效的。源码路径为k8s.io/client-go/tools/cache/index.go。Indexer的实现主要分为2部分,ThreadSafeMa......
  • 深入理解JVM学习笔记
    Java虚拟机内存区域:[2.2]运行时数据区域:1.程序计数器2.Java虚拟机栈3.本地方法栈4.Java堆5.方法区6.运行时常量池7.直接内存[2.3.1]对象的创建在虚拟机中,当......
  • 一道题为例深入理解二分
    深刻理解二分最佳牛围栏农夫约翰的农场由$N$块田地组成,每块地里都有一定数量的牛,其数量不会少于$1$头,也不会超过$2000$头。约翰希望用围栏将一部分连续的田......
  • Spring注解篇,学完注解深入了解SpringBoot更容易
    由于SpringBoot项目底层也都是Spring,使用SpringBoot就需要对Spring的注解有一定的了解,这次就把Spring的部分注解聊一下。熟悉了Spring的注解使用SpringBoot开发更是得心......