Z-index为何不起做用？

时间 2019-12-06

标签 index 为何不起繁體版

原文原文链接

1、概述

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

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

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

要弄清楚z-index不起做用的缘由，须要回答如下三个问题：
1.什么是堆叠上下文（Stacking Contexts）？
2.如何造成堆叠上下文？
3.在同一个堆叠中元素如何堆叠（即在z轴方向上如何排序）？bash

2、什么是堆叠上下文

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

3、如何造成堆叠上下文？

要造成一个堆叠上下文只需知足如下条件中的一个：动画

文档根元素(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等任何一个属性.
其余

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

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

5、实例

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

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

<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; }这个去掉绿色快就显示到最上面了spa

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

<!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>
复制代码