Eighteen Blog

背景

我们在使用z-index的时候，有时候会发现，无论怎么样增大z-index的值，都无法改变目标元素的层级。

  • 其实是这几种情况在作怪
  1. position
  2. float
  3. opcity

父盒子的层级问题

  • 父盒子的层级问题，当你的父盒子层级小于另一个父盒子层级的时候，你子元素的z-index再高都是没有用的。该元素的层级只在该元素所在的容器内起作用。该种情况大家应该容易理解，不过也可以看下面的例子。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<style type="text/css">
        .a1{
            position:relative;
            z-index: 2;
            width:400px;
            height:400px;
            background: black;
            border:1px solid #eee;
            margin-bottom: -100px;
        }
        .a{
            position:relative;
            z-index: 1;
            width:400px;
            height:400px;
            background: yellow;
            left:0;
            border:1px solid #eee;
        }

        .b{
            position:absolute;
            left:0;
            top:0;
            z-index: 50;
            width:200px;
            height:200px;
            background: red;

        }

        .c{
            position: absolute;
            left:0;
            top:0;
            z-index:1111;
            width:100px;
            height:100px;
            background: blue;
        }
    </style>
</head>
<body>
<div class="a1"></div>
<div class="a">
    <div class="b"></div>

    <div class="c"></div>
</div>
</body>

opcity属性

  • opcity属性，当你要设置两个元素的z-index值的时候，要注意是否给其中一个元素添加了opcity属性，如果添加了，那么添加了opcity属性的元素将一直在最上层，这个我在另一篇文章中讲过。
  • opcity引发的元素层级变化

position影响

  • 还有就是比较普遍的，我们设置层级一般都是因为设置了position，当你设置的两个子元素，一个有position属性，另一个没有position的时候，拥有position属性的元素将一直在其他元素上方。如下面的例子
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<style type="text/css">
        .a{
            position:relative;
            z-index: 1;
            width:400px;
            height:400px;
            background: yellow;
            left:0;
            border:1px solid #eee;
        }

        .b{
            position:absolute;
            left:0;
            top:0;
            z-index: 50;
            width:200px;
            height:200px;
            background: red;

        }

        .c{
            z-index:100;
            width:100px;
            height:100px;
            background: blue;
        }
    </style>
</head>
<body>
<div class="a">
    <div class="b"></div>
    <div class="c"></div>
</div>
</body>

需要给c也加上position属性才让bc可以先同处一级，然后z-index才会起作用。

float影响

  • 那如果我把子元素的position都去掉呢？当父盒子有position而所有子元素都没有position属性的时候，z-index一样全部失效，后面的盒子将会覆盖前面的盒子，z-index无效。
  • 同样的我们两个都加上浮动的效果跟上面的效果是一样的，后覆盖前，z-index无效
  • 一个加float另一个不加，则是加float的元素一直浮动在最上层。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<style type="text/css">
        .a{
            position:absolute;
            z-index: 1;
            width:400px;
            height:400px;
            background: yellow;
            left:0;
            border:1px solid #eee;
        }

        .b{
            z-index: -10;
            width:200px;
            height:200px;
            background: red;
            margin-bottom: -100px;

        }

        .c{
            z-index:101;
            width:100px;
            height:100px;
            background: blue;
        }
    </style>
</head>
<body>
<div class="a">
    <div class="b"></div>
    <div class="c"></div>
</div>
</body>

其他情况欢迎补充。

 上一页

Css

 评论