Z-index为什么不起作用？

最新推荐文章于 2024-04-18 09:54:38 发布

weixin_33811961

最新推荐文章于 2024-04-18 09:54:38 发布

阅读量1.3k

点赞数

文章标签：人工智能

原文链接：https://juejin.im/post/5ce78ecbe51d4510bf1d65f3

版权

一、概述

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

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

转载于:https://juejin.im/post/5ce78ecbe51d4510bf1d65f3

weixin_33811961

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Z-index为什么不起作用？

一、概述最近在做一个动画的时候，把动画元素的样式设置如下，但丝毫不起作用。.animate{ display:block; z-index:9999; position:absute;}复制代码这几天正好有时间，找了很多资料，来探究css如何控制html元素的堆叠秩序要弄清楚z-index不起作用的原因，需要回答以下三个问题：1.什么是堆叠上下文（Stackin...
复制链接

扫一扫