【中级-好题】one、two 哪个 div 在 z 轴的上面

题目

<div class="one"></div>
<div class="two"></div>

<style>
    .one {
        width: 100px;
        height: 100px;
        z-index: 5;
        background-color: red;
    }
    .two {
        width: 100px;
        height: 100px;
        position: relative;
        top: -50px;
        z-index: 3;
        background-color: blue;
    }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

参考答案

two在z轴上面，因为z-index在没有position的时候不生效

加分项：如果第一个one的position各种取值是什么效果？

position: relative：位置保持不变，one覆盖two
position: absolute/fixed：one在顶部，two也在顶部且上面一半溢出顶部，one覆盖two
position: static：同不加position的效果