z-index中的层叠规则使用

最新推荐文章于 2024-03-20 15:00:00 发布

wendyTan10

最新推荐文章于 2024-03-20 15:00:00 发布

阅读量691

点赞数 1

分类专栏： css 文章标签： css css3 前端 html html5

本文链接：https://blog.csdn.net/weixin_42369598/article/details/122209550

版权

css 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

有关z-index的层叠规则的应用

有关z-index的应用，我们常常会误以为是z-index的值越大层级就越高，在书写项目的弹窗或遮罩层时，把z-index设置成9/99这样的形式，这样可以使页面的层级升高，展示在最上层！
但也有一种场景，显示纯色背景下的png图片装饰的形式(俗称多背景的形式)，或者::before/::after生成的icon图标插入的层级关系的设置，要想设置这些层级的关系，并做到不影响全局的层级展示，必须深刻的了解z-index与其他属性之间的关系；

层级不完全受`z-index`影响,还有关是否产生`层叠上下文`的使用

在这里插入图片描述
俩个主要的层叠准则:
谁大谁上：当具有明显的层叠水平标识的时候，如生效的 z-index 属性值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。
后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在 DOM 流中处于后面的元素会覆盖前面的元素。（此处就应用到的::before/::after的使用在DOM中的使用，这里要注重与DOM元素内容的层级覆盖）

层叠上下文的创建

1. 定位元素与传统层叠上下文
对于 position 值为 relative/absolute 以及 Firefox/IE 浏览器（不包括 Chrome 浏览器）下含有 position:fixed 声明的定位元素，当其 z-index 值不是 auto 的时候，会创建层叠上下文。
在这里插入图片描述
示例代码如下：

<style>
	body {
	    font-size: .2rem;
	}
	img {
		width: 1rem;
		height: 1rem;
	}
	.zindex__box {
	    position: relative;
	    width: 1rem;
	}
	.zindex1 {
	    background-color: gray;
	    margin-left: .7rem;
	    margin-top: -.24rem;
	}
	.zindex p {
	    font-size: .14rem;
	    line-height: .2rem;
	    margin: 0;
	}
	.zindex2 {
	    background-color: pink;
	}
	.zindex__box1 {
	    position: relative;
	    width: 1rem;
	}
</style>
<div class="zindex">
	// z-index: auto; 没有产生层叠上下文
    <div class="zindex__box" style="z-index: auto;">
        <div class="zindex1" style="position:absolute; z-index:2;">
            <img src="../images/01.jpg" alt="">
            <p>z-index : 9</p>
        </div>
    </div>
    <div class="zindex__box">
        <div class="zindex2" style="position:relative; z-index:1;">
            <img src="../images/02.jpg" alt="">
            <p>z-index : 1</p>
        </div>
    </div>
</div>
<br>
<div class="zindex">
	// z-index: 0; 俩个元素都产生层叠上下，遵顼后者居上的原则
    <div class="zindex__box1" style="z-index: 0;">
        <div class="zindex1" style="position:absolute; z-index:2;">
            <img src="../images/01.jpg" alt="">
            <p>z-index : 9</p>
        </div>
    </div>
    <div class="zindex__box1" style="z-index: 0;">
        <div class="zindex2" style="position:relative; z-index:1;">
            <img src="../images/02.jpg" alt="">
            <p>z-index : 1</p>
        </div>
    </div>
</div>

2. CSS3 与新时代的层叠上下文
（1）元素为 flex 布局元素（父元素 display:flex|inline-flex），同时 z-index 值不是 auto。
（2）元素的 opacity 值不是 1。
（3）元素的 transform 值不是 none。
（4）元素 mix-blend-mode 值不是 normal。
（5）元素的 filter 值不是 none。
（6）元素的 isolation 值是 isolate。
（7）元素的 will-change 属性值为上面 2～6 的任意一个（如 will-change:opacity、 will-hang:transform 等）。
（8）元素的-webkit-overflow-scrolling 设为 touch。

层级应用`z-index`为负值

z-index为负值时，图片有时可隐藏在背景后，有时却不可隐藏后，原因在于是否产生层叠上下文
在这里插入图片描述
下图是都设置了z-index：-1;左图隐藏在背景的后面；右图在背景前面

示例代码如下：

<style>
	body {
	    font-size: .2rem;
	}
	img {
	    width: 1rem;
	    height: 1rem;
	}
    .zindex__img {
        background-color: pink;
        width: .9rem;
        height: 1.1rem;
        margin-bottom: .5rem;
    }
    
    .zindex__img>img {
        position: relative;
        z-index: -1;
        right: -50px;
    }
    
    .zindex__img-ts {
        transform: scale(1);
    }
</style>
<div class="zidnex__box">
  <div class="zindex__img">
      <img src="../images/01.jpg">
  </div>
  <div class="zindex__img zindex__img-ts">
      <img src="../images/01.jpg">
  </div>
</div>