Z-index为什么不起作用？

栏目: CSS · 发布时间: 5年前

内容简介：最近在做一个动画的时候，把动画元素的样式设置如下，但丝毫不起作用。这几天正好有时间，找了很多资料，来探究css如何控制html元素的堆叠秩序要弄清楚z-index不起作用的原因，需要回答以下三个问题：

最近在做一个动画的时候，把动画元素的样式设置如下，但丝毫不起作用。

.animate{
    display:block;
    z-index:9999;
    position:absute;
}
复制代码

这几天正好有时间，找了很多资料，来探究css如何控制html元素的堆叠秩序

要弄清楚z-index不起作用的原因，需要回答以下三个问题：

1.什么是堆叠上下文（Stacking Contexts）？

2.如何形成堆叠上下文？

3.在同一个堆叠中元素如何堆叠（即在z轴方向上如何排序）？

二、什么是堆叠上下文

堆叠上下文和BFC有点类似，具有共同父元素的一组元素按堆叠顺序一起向前或向后移动，构成所谓的堆叠上下文。每个堆叠上下文中的元素相互不影响。

三、如何形成堆叠上下文？

要形成一个堆叠上下文只需满足以下条件中的一个：

文档根元素(html).
元素具有绝对或相对定位且z-index的值不为auto.
position 为 fixed 或sticky.
flex容器的子元素且z-index的值不为auto.
grid容器的子元素且z-index的值不为auto.
元素样式的opacity属性小于1.
元素样式的 mix-blend-mode属性不为normal.
元素的样式包含transform、filter、perspective、clip-path等任何一个属性.
其他

四、在同一个堆叠中元素如何堆叠？

1.根元素的背景和边框
2.子代非定位块，按元素出现的顺序排序
3.浮动块
4.后代非定位内联元素
5.子代定位元素，按元素出现的顺序排序
6.堆叠上下文之间按元素出现的顺序及z-index排序

五、实例

1、文章开头概述中的问题

我需要把绿色的方块放到最上面

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
       div:nth-child(2) {
          opacity: .99; 
          display: block;
          z-index: 9999;
       }
        .red, .green, .blue {
          position: absolute;
          width: 100px;
          color: white;
          line-height: 100px;
          text-align: center;
        }
        .red {
          top: 20px;
          left: 20px;
          background: red;
        }
        .green {
          top: 60px;
          left: 60px;
          background: green;
          display: block;
          z-index: 9999;
        }
        .blue {
          top: 100px;
          left: 100px;
          background: blue;
        }
 </style>
</head>
<body>
        <div>
            <span class="red">Red</span>
        </div>
        <div>
            <span class="green">Green</span>
        </div>
        <div>
            <span class="blue">Blue</span>
        </div>
</body>
</html>
复制代码

只需把 div:nth-child(2) { opacity: .99; }这个去掉绿色快就显示到最上面了

2、堆叠上下文之间的排序

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS中的堆叠上下文</title>
    <style>
       div {
            padding: 10px;
            text-align: center;
        }

        #abs1 {
            position: absolute;
            width: 150px;
            height: 200px;
            top: 10px;
            right: 140px;
            border: 1px dashed #900;
            background-color: #fdd;
        }

        #sta1 {
            height: 100px;
            border: 1px dashed #996;
            background-color: #ffc;
            margin: 0px 10px 0px 10px;
            text-align: left;
        }

        #flo1 {
            margin: 0px 10px 0px 20px;
            float: left;
            width: 150px;
            height: 200px;
            border: 1px dashed #090;
            background-color: #cfc;
        }

        #flo2 {
            margin: 0px 20px 0px 10px;
            float: right;
            width: 150px;
            height: 200px;
            border: 1px dashed #090;
            background-color: #cfc;
        }

        #abs2 {
            position: absolute;
            width: 150px;
            height: 100px;
            top: 130px;
            left: 100px;
            border: 1px dashed #990;
            background-color: #fdd;
            
        }

        #relat {
            position: relative;
            width: 150px;
            height: 100px;
            top: 30px;
            left: 100px;
            border: 1px dashed #990;
            background-color: #fdd;
        }
    </style>
</head>

<body>
    <div id="abs1">
        <h2>DIV #1</h2>position: absolute;
    </div>
    <div id="flo1">
        <h2>DIV #2</h2>float: left;
    </div>
    <div id="flo2">
        <h2>DIV #3</h2>float: right;
    </div>
    <div id="sta1">
        <h2>DIV #4</h2>no positioning
    </div>
    <div id="relat">
        <h2>DIV #5</h2>
        position: relative
    </div>

</body>

</html>
复制代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

用户体验面面观

[美] 库涅夫斯基(Mike Kuniavsky) / 汤海 / 清华大学出版社 / 2010-5 / 69.00

这是一本专注于用户研究和用户体验的经典读物，同时也是一本容易上手的实战手册，从实践者的角度，着重讨论和阐述了用户研究的重要性、主要的用户研究方法和工具，同时借助于实例介绍了相关的应用。全书共3部分18章，深度剖析了何为优秀的用户设计，用户体验包括哪些研究方法和工具，如何得出和分析用户体验调查结果等。一起来看看《用户体验面面观》这本书的介绍吧!

码农工具

HTML 编码/解码

HSV CMYK 转换工具

HSV CMYK互换工具