CSS中z-index全解析

一、z-index解释

z-index属性决定了一个HTML元素的层叠级别，元素层叠级别是相对于元素在Z轴上（与X轴Y轴相对照）的位置而言。一个更高的z-index值意味着这个元素在叠层顺序中会更靠近顶部。这个层叠顺序沿着垂直的线轴被呈现。

在一个HTML页面中，自然的层叠顺序（也就是元素在Z轴上的顺序）是由很多因素决定的：

具有负值的stacking contexts(层叠环境)元素，按照出现的先后顺序排列（越靠后层级越靠上）;
没有被定位，没有浮动的块级元素，按照出现的先后顺序排列;
没有被定位，有浮动的元素，按照出现的先后顺序排列;
内联元素，按照出现的先后顺序排列排列;
被定位的元素，按照出现的先后顺序排列;
Z-index 属性，当被正确使用的时候，会改变自然的层叠顺序。

二、顺序规则

如果不对节点设定 position 属性, 位于文档流后面的节点会遮盖前面的节点.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>z-index练习</title>

    <style>

        div{width: 200px; height: 200px;}

        .a{ background-color: red;}

        .b{ background-color: green; margin-top: -100px; margin-left: 100px;}

    </style>

</head>

<body>

    <div class="a">A</div>

    <div class="b">B</div>

</body>

</html>

aaarticlea/png;base64,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" alt="" width="225" height="225" />

二、定位规则

2.1 如果将 position 设为 static, 位于文档流后面的节点依然会遮盖前面的节点浮动, 所以 position:static 不会影响节点的遮盖关系.

    <style>

        div{width: 200px; height: 200px;}

         .a{ background-color: red; position: static;}

         .b{ background-color: green; margin-top: -100px; margin-left: 100px;}

    </style>

2.2 如果将 position 设为 relative (相对定位), absolute (绝对定位) 或者 fixed (固定定位), 这样的节点会覆盖没有设置 position 属性或者属性值为 static 的节点, 说明前者比后者的默认层级高.

    <style>

        div{width: 200px; height: 200px;}

        .a{ background-color: red; position: relative;}

        .b{ background-color: green; margin-top: -100px; margin-left: 100px;}

    </style>

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAATUAAAE1CAYAAACGH3cEAAAFFUlEQVR4nO3csW0TYRiAYR/KKJkCJgAaKkagpqFDQpEYgLSMQEUDTABTZBfnTrYhxI5TOMaXl+eRfjm6KNJXvbq7P7+H5WgBEPHk1AMAPCRRA1LOtq4MwwnGgEfC25rZc6cGpIgakCJqQMq9Ufsxrukt27PjzwJwsHuj9nFcb8b1a7EKHMCc7Y3a1WIVs1fjejqur/9iIoAD7I3at/Xn83G9Htfno48DcJi9UXs7rk/rn1+uPy+POg7AYe6M2ub92SZm54vVu7Uvx54I4ADD1oH29YmCzW7nzxu/mkL3YlzfF6tHUvjvOFEwe9vHpBZ/Nggmuw5NTRsGogbM0c7Hz80GwXLHmh5BbRgAc7Uzajc3CG57t/60YQDM0VbUbm8Q3DZtGEz/s2bDAJijv6N2dfn7BMH5nj96v3DCAJinO3c/gR3sfs6eb+kAUkQNSBE1IEXUgBRRA1JEDUgRNSBF1IAUUQNSRA1IETUgRdSAFFEDUkQNSBE1IEXUgBRRA1JEDUgRNSBF1IAUUQNSRA1IETUgRdSAFFEDUkQNSBE1IEXUgBRRA1JEDUgRNSBF1IAUUQNSRA1IETUgRdSAFFEDUkQNSBE1IEXUgBRRA1JEDUgRNSBF1IAUUQNSRA1IETUgRdSAFFEDUkQNSBE1IEXUgBRRA1JEDUgRNSBF1IAUUQNSRA1IETUgRdSAFFEDUkQNSBE1IEXUgBRRA1JEDUgRNSBF1IAUUQNSRA1IETUgRdSAFFEDUkQNSBE1IEXUgBRRA1JEDUgRNSBF1IAUUQNSRA1IETUg5ezUA8BjMlwMpx6BG5YfllvX3KkBKaIGpIgakCJqQIqoASmiBqSIGpAiakCKqAEpogakiBqQImpAiqgBKaIGpIgakCJqQIqoASmiBqSIGpAiakCKqAEpogakiBqQImpAiqgBKaIGpIgakCJqQIqoASmiBqSIGpAiakCKqAEpogakiBqQImpAiqgBKaIGpIgakCJqQIqoASmiBqSIGpAiakCKqAEpogakiBqQImpAiqgBKaIGpIgakCJqQIqoASmiBqSIGpAiakCKqAEpogakiBqQImpAiqgBKaIGpIgakCJqQIqoASmiBqSIGpAiakCKqAEpogakiBqQImpAiqgBKaIGpIgakCJqQIqoASmiBqSIGpAiakCKqAEpogakiBqQImpAiqgBKaIGpIgakCJqQIqoASmiBqSIGpAiakCKqAEpogakiBqQImpAiqgBKaIGpIgakHK2dWW5PMEY3GW4GE49Ajwq7tSAFFEDUkQNSBE1IEXUgBRRA1JEDUgRNSBF1IAUUQNSRA1IETUgRdSAFFEDUkQNSBE1IEXUgBRRA1JEDUgRNSBF1IAUUQNSRA1IETUgRdSAFFEDUkQNSBE1IEXUgBRRA1JEDUgRNSBF1IAUUQNSRA1IETUgRdSAFFEDUkQNSBE1IEXUgBRRA1JEDUgRNSBF1IAUUQNSRA1IETUgRdSAFFEDUkQNSBE1IEXUgBRRA1JEDUgRNSBF1IAUUQNSRA1IETUgRdSAFFEDUkQNSBE1IEXUgBRRA1JEDUgRNSBF1IAUUQNSRA1IETUgRdSAFFEDUkQNSBE1IEXUgBRRA1JEDUgRNSBF1IAUUQNSRA1IETUgRdSAFFEDUkQNSBE1IEXUgBRRA1JEDUgRNSBF1IAUUQNSRA1IETUgRdSAFFEDUkQNSBmWo1MPAfBQ3KkBKaIGpIgakCJqQIqoASnXPtU+5gHypcsAAAAASUVORK5CYII=" alt="" width="218" height="218" />

2.3 在没有 z-index 属性干扰的情况下, 根据顺序规则和定位规则, 我们可以做出更加复杂的结构. 这里我们对 A 和 B 都不设定 position, 但对 A 的子节点 A-1 设定 position:relative. 根据顺序规则, B 会覆盖 A, 又根据定位规则 A-1 会覆盖 B.

...
<style>

    div{width: 200px; height: 200px;}

    .a{ background-color: red;}

    .a-1{width: 130px; height: 130px; background-color: blue; position: relative;}

    .b{ background-color: green; margin-top: -100px; margin-left: 100px;}

</style>

</head>

<body>

    <div class="a">这里是A的内容

        <div class="a-1">A-1</div>

    </div>

    <div class="b">这里是B的内容</div>

</body>
...

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAATcAAAE2CAYAAAAEftWXAAAMSUlEQVR4nO3dO48kVx3G4RrkT2DZZGS7SCAyEmsdkGIjJEdElggs2Rl24gyJRiIjWZyB5ACJyAlIltekBLackHGRvJs5M8hfYeg/U0dTW1O37pmdy7vPI5Vm+lLd1QP923Oqqtsnp3sdQJhv3fQGADwL4gZEemHy2pOTa94MuEPsybkTjNyASOIGRJqN26f75XcLK5709wG4jWbjdn+/vLew4sP98pcr35yb9Wo3HfQn3VnMnxz4eJ/2j3mZ7XnnEuvD82w2bvf2y9vd/Ojt3f3yh5UHrzfnyQHL1HNtXXcpAp/291kKTYXr8/51jX3Snf0t7i2s/yz8sTv7Gxshw+EW97m9352N3trIZbx0E9eNI/Nov5wOlrr8YHRdLW8vbMf4McbLw5UX+Zv+8SteU6Go6N2feD1tpPZRdxaZLTE+xjsTj30y2KbXZ24XPZi3GLc2envcLcdluPz+GWzk3Ju7LUvT5zYie6M7i+rcVHoc0KYC8oPu4ut8MFp/arte7597y0jz4cRzLC3j5weetnq0tGL12sp92rRvyjhMc2/4pSnuZUZun/Q/6zX8bOV55rb//Y33Hf8jMDdKXRtpvtNdjJ/9b3CYybi1WI1HGHNToRoNzU0rr2JaepmRW93WYvKT/ufW6eTavrbvrqz/ZXc26ltT/4DUvr42Pf1+dxbUdrl81l/f/jepy2v/6MDzbDJu9aaZGmHUyKRCMwxexa5GQ1tHN8c4duTWQtyi1qbZH2183lqvwnPsEc96nn9suF/FtqJVU+d6PRW6n3dnf9eH3fn+v3f721vkgAWnU84+YHK6f2Odvt3/PlxqtQeD3x9O3Oe0v093wDL3OMcuDwbb2ZZH/XM92rCdj/vb3574O4wfY3j/4fO0Zbju3N+13daNbn88cZ3lBhfuhKM+oXDa/6zRQ00xp06faI6Zls4dnd2yvDp4jM+7i/v3Xu9vHx9YmDugUGr0ViOwrdPZJ/3ztIMEw9HXnDZ6e69fZ3hg5l5/3Rvd+mkvwJmjP371+eDn3CkJh+wXavudSnsz1/K4v24cnrkjuJ/1t38ysd4wpIceWPhld35aTHN/4n6f9tc/HLyed/vL97uLf6u2f/Oj7jzwc+F+fbDe2nl78Lw7OG7tzdhGX/WmrTfdeFTTRiKHnB4xNbr5bTd9sOH+xLrDN/vwQMJY2z94yHlqr/Xb8cnCfWpb6/XV32U8mq3Lj7qnA9UedxjltVNC6u/+xmgd4KLNcWtTxTbdam+sNiqpmAynS23n93iZm5a2ZXxk8g/d9ChrauTWtml8IGHsXr8NWw8sNMPR5ZT3u4tT2qHXVm4Hrs7iB+crWC0sNVKqkcvSqOTQqd6ad/rnbPusto602icSlj4uVdPMpSn1kja6PPbjWP86cj1gu8kvq6w3fBuhlQpLjZSW3szDUUlbf8nSqQz1XDXFq534wxHi8Jy2qf1dzZbR0XB7K4Zr2zu0NDWdU1PmzweXH8/c771u+bw9YJvJuI13iH+3W47J2NQRx0NUHIdhGz7us1Ijz+HBj2F8a8Q4Ds6j0eW1bdu6f2z4d5/iIAJsc1Lng1y81imiMGviLcPt45t4gUiT09ITx/ToaqptBM/dZeQGRBI3IJK4AZE2xm3uw1Fb1ckUPu4NXJ8NcaswPeiX3x7xFO2zDgDXZ0Pc6hOY9X2yx3xJd43WDjn3H+BqrMRt+J9XaR9D3/ppzApbxbA+aLT0JeIAV2/yEwrnH1CoQA0/CNU+/HPol+20/W3P4r+NxbPiPLcZPqFwJ6yM3Grk9bPB5fZdGsceWAC4Hgtxa18wNPxWtPbR8mMOLABcn4W4ta9yHH/nbbnqb24DuFozcWsHEqb+o3rty37agYXaD7f0ReEA12/mgML4QMLYoQcWHFC4ixxQmOGAwp0wM3IbH0gYq9scWABur4txe9IOJCx9H2y7zYEF4HZaOc+N55lp6QzT0jvBt4IAkcQNiCRuQCRxAyKJGxBJ3IBI4gZEEjcgkrgBkcQNiCRuQCRxAyKJGxBJ3IBI4gZEEjcgkrgBkcQNiCRuQCRxAyKJGxBJ3IBI4gZEEjcgkrgBkcQNiCRuQCRxAyKJGxBJ3IBI4gZEEjcgkrgBkcQNiCRuQCRxAyKJGxBJ3IBI4gZEEjcgkrgBkcQNiCRuQCRxAyKJGxBJ3IBI4gZEEjcgkrgBkcQNiCRuQCRxAyKJGxBJ3IBI4gZEEjcgkrgBkcQNiCRuQCRxAyKJGxBJ3IBIJ6d7F648uYlN4dbZ+T8Ct9/pry4k7P+M3IBI4gZEEjcgkrhxO32zX3b9z7Ev9suHRzzmx/26l9meJ0euz7V74aY3gFus3tAvDi7XG/tPG9d9c7/cG1yusPx95r6/GD1P+XK//HDi+vLP/fKjjdtxVWo7ftydvf7dNT83RxE3DrdbuX1uVPWd/fLW6LoaSX3QnQfum/5y04LY1q3bv+qmIzsVyWPsjrx9bT2ulbhxuN0VPtYr++Wv3dlI7ZWZ56gR49/63z/rLo4Kx0FcG2H+deK68WMeEsrx83MriBuH263cfsz+sJc23Kei9fV++emG+06NEmtq/HL3dETL2vbuuqfj12I2DiK3irhxuN0VPlZNS2vf2pZI/Ltb3te2NtKqMH5vw/PsRj9/Mbhc2/rT/veKYo0Q3+xMSW8hceNwu5Xb50ZCX82s+52Nz1tRqdFbBXE8+lrT9tX9t1sP6Yfd09vaRmoVtq/729/qzkeGdfnf3bYRJddG3NiuorDbcL/xdLCZmiq2/WM1ZRzGYfw8LYD3+vu/1D09TVzzWf+z9rf9p1sO0XAbW+iGU9AvuqenqnOvlxslbqyrN/PUTvgt6vSJpVFWxaFGRHVUdC5uwwMKpaaJwyOsa77oH7/d/8PufPQ1p0XthxP3e6VfKshtWmrf260jbsxr4Whv5lKhGI58WnguM3p5+Yjtquj8efC8c1Pbdn7dMIS1TsVr110cIbb7V5S/6n+fOz+vqSnpn7r1kHOtxI15U6ObGsG9Obpubl/a1jd7xXLrfrem7dRfmpLW9n97ZtvqdX3cL+PHbeGu17o0Omz74obrcGuIG/Om9o+VGqkMp2FT+9K2qseskdE4mFvs+p9zgVvbphakY05d4dYTN7Zr+5dqGrrrzk+R2GpuhHfZTxbUEdBvX2L9ry6xLreWuDFv152Pyur3mmbe65cacX0wuu+Udl7YoVO38eMtTVvrs6aHxG38iYJ67LkDAj55cGeJG/N2/c/aLzXef7b1tJDLPncZHy1tRzKHhlPQFuA5L3bbt33LPjduJV8zzjxfM84d4GvGgeeKuAGRxA2IJG5AJHEDIokbEEncgEjiBkQSNyCSuAGRxA2IJG5AJHEDIokbEEncgEjiBkQSNyCSuAGRxA2IJG5AJHEDIokbEEncgEjiBkQSNyCSuAGRxA2IJG5AJHEDIokbEEncgEgvTF152p1c93aw4GR301sAd4+RGxBJ3IBI4gZEEjcgkrgBkcQNiCRuQCRxAyKJGxBJ3IBI4gZEEjcgkrgBkcQNiCRuQCRxAyKJGxBJ3IBI4gZEEjcgkrgBkcQNiCRuQCRxAyKJGxBJ3IBI4gZEEjcgkrgBkcQNiCRuQCRxAyKJGxBJ3IBI4gZEEjcgkrgBkcQNiCRuQCRxAyKJGxBJ3IBI4gZEEjcgkrgBkcQNiCRuQCRxAyK9MHnt6ek1bwaLfn1y01sAd46RGxBJ3IBI4gZEEjcgkrgBkcQNiCRuQCRxAyKJGxBJ3IBI4gZEEjcgkrgBkcQNiCRuQCRxAyKJGxBJ3IBI4gZEEjcgkrgBkcQNiCRuQCRxAyKJGxBJ3IBI4gZEEjcgkrgBkcQNiCRuQCRxAyKJGxBJ3IBI4gZEEjcgkrgBkcQNiCRuQCRxAyKJGxBJ3IBI4gZEEjcgkrgBkcQNiCRuQCRxAyKJGxBJ3IBI4gZEEjcgkrgBkcQNiCRuQCRxAyKJGxBJ3IBI4gZEEjcgkrgBkcQNiCRuQCRxAyKJGxBJ3IBI4gZEEjcgkrgBkcQNiCRuQCRxAyKJGxBJ3IBI4gZEEjcgkrgBkcQNiCRuQCRxAyKJGxBJ3IBI4gZEEjcgkrgBkcQNiCRuQCRxAyKJGxBJ3IBI4gZEEjcgkrgBkcQNiCRuQCRxAyKJGxBJ3IBI4gZEOjndu+mNALhqRm5AJHEDIokbEEncgEjiBkQSNyDS/wBsV2E1IlWaSgAAAABJRU5ErkJggg==" alt="" width="246" height="246" />

三、参与规则

不用 position 属性, 在节点加上 z-index 属性. z-index 对节点是不起作用的.

W3C 对 z-index 属性的描述中提到在 z-index 属性仅在节点的 position 属性为 relative, absolute 或者 fixed 时生效.

此处不做演示

四、默认值规则

如果所有节点都定义了 position:relative. z-index 为 0 的节点与没有定义 z-index 在同一层级内没有高低之分;

但 z-index 大于等于 1 的节点会遮盖没有定义 z-index 的节点; z-index的值为负数的节点将被没有定义 z-index 的节点覆盖.

...
<style>

    div{width: 200px; height: 200px; position: relative;}

    .a{ background-color: red;}

    .b{ background-color: green; margin-top: -100px; margin-left: 100px; z-index: 1}

    .c{ background-color: yellow; margin-top: -100px; margin-left: 200px;}

    .d{ height: 450px; width: 450px; background-color: blue; color: #fff; margin-top: -400px; margin-left:0px;

        z-index: -1;}

</style>

</head>

<body>

    <div class="a">这里是A的内容</div>

    <div class="b">这里是B的内容</div>

    <div class="c">这里是C的内容这里是C的内容</div>

    <div class="d">这里是D的内容这里是D的内容这里是D的内容</div>

</body>
...

aaarticlea/png;base64,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BIISAAJBCQCBoASAQFACQCAoASAQlAAQCEoACAQlAASCEgACQQkAgaAEgEBQAkAgKAEgEJQAEAhKAAgEJQAEghIAAkEJAIGgBIBAUAJAICgBIBCUABAISgAIBCUABIISAAJBCQCBoASAQFACQCAoASAQlAAQCEoACAQlAASCEgACQQkAgaAEgEBQAkAgKAEgEJQAEAhKAAgEJQAEghIAAkEJAIGgBIBAUAJAICgBIBCUABAISgAIBCUABIISAAJBCQCBoASAQFACQCAoASAQlAAQCEoACAQlAASCEgACQQkAgaAEgEBQAkAgKAEgmM1rKzfMrmtX4NM3n3uDwJjZbL55pT0w7x2GihIAAkEJAIGgBIBAUAJAICgBIBCUABAISgAIBCUABIISAAJBCQCBoASAQFACQCAoASAQlAAQCEoACAQlAASCEgACQQkAgaAEgEBQAkAgKAEgEJQAEAhKAAgEJQAEghIAAkEJAIGgBIBAUAJAICgBIBCUABAISgAIBCUABIISAAJBCQCBoASAQFACQCAoASAQlAAQCEoACAQlAASCEgACQQkAgaAEgEBQAkAgKAEgEJQAEAhKAAgEJQAEghIAAkEJAIGgBIBAUAJAICgBIBCUABAISgAIBCUABIISAAJBCQCBoASAQFACQCAoASAQlAAQCEoACAQlAASCEgACQQkAgaAEgEBQAkAgKAEgEJQAEAhKAAgEJQAEghIAAkEJAIGgBIBAUAJAICgBIBCUABAISgAIBCUABIISAAJBCQCBoASAQFACQCAoASAQlAAQCEoACAQlAASCEgACQQkAgaAEgEBQAkAgKAEgEJQAEAhKAAgEJQAEghIAAkEJAIGgBIDgs+veAdgns9n8uncB+MhUlAAQCEoACAQlAASCEgACQQkAgaAEgEBQAkAgKAEgEJQAEAhKAAgEJQAEghIAAkEJAIGgBIBAUAJAICgBIBCUABAISgAIBCUABIISAAJBCQCBoASAQFACQCAoASAQlAAQCEoACAQlAASCEgACQQkAgaAEgEBQAkAgKAEgEJQAEAhKAAgEJQAEghIAAkEJAIGgBIBAUAJAICgBIBCUABAISgAIBCUABIISAAJBCQCBoASAQFACQCAoASAQlAAQfNa/YT6/jt0AgE+TihIAAkEJAIGgBIDg/wGXa6PVle9kGgAAAABJRU5ErkJggg==" alt="" width="413" height="413" />

当 position设为 relative, absolute 或者 fixed, 而没有设置 z-index 时, IE8 以上和 W3C 浏览器 (下文我们统称为 W3C 浏览器) 的 z-index 默认值是 auto, 但 IE6 和 IE7 是 0.

五、从父规则

5.1 如果 A, B 节点都定义了 position:relative, A 节点的 z-index 比 B 节点大, 那么 A 的子节点必定覆盖在 B 的子节点前面.

...
<style>

    div{width: 200px; height: 200px;}

    .a{ background-color: red; position: relative; z-index: 2;}

    .b{ background-color: green; margin-top: -100px; margin-left: 100px; position: relative; z-index: 1}

    .a-1,.b-1{ background-color: yellow; width: 160px; height: 120px;}

</style>

</head>

<body>

    <div class="a">这里是A的内容

        <div class="a-1">这里是A的子内容A-1</div>

    </div>

    <div class="b">这里是B的内容这里是B的内容

        <div class="b-1">这里是B的子内容B-1</div>

    </div>

</body>
...

aaarticlea/png;base64,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" alt="" />

5.2 如果所有节点都定义了 position:relative, A 节点的 z-index 和 B 节点一样大, 但因为顺序规则, B 节点覆盖在 A 节点前面. 就算 A 的子节点 z-index 值比 B 的子节点大, B 的子节点还是会覆盖在 A 的子节点前面.

...
<style>

    div{width: 200px; height: 200px;}

    .a{ background-color: red; position: relative; z-index: 1;}

    .b{ background-color: green; margin-top: -100px; margin-left: 100px; position: relative; z-index: 1}

    .a-1,.b-1{ width: 160px; height: 120px; position: relative;}

    .a-1{ background-color: yellow; z-index: 999;}

    .b-1{ background-color: blue;}

</style>

</head>

<body>

    <div class="a">这里是A的内容

        <div class="a-1">这里是A的子内容A-1</div>

    </div>

    <div class="b">这里是B的内容这里是B的内容

        <div class="b-1">这里是B的子内容B-1</div>

    </div>

</body>
...

aaarticlea/png;base64,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" alt="" />

很多人将 z-index 设得很大, 9999 什么的都出来了, 如果不考虑父节点的影响, 设得再大也没用, 那是无法逾越的层级.

六、层级树规则

可能你会觉得，在 DOM 结构中的兄弟节点会拎出来进行比较并确定层级, 其实不然.

...

<style>

    div{width: 200px; height: 200px;}

    .a{ background-color: red; position: relative; z-index: 2;}

    .b{ background-color: green; margin-top: -100px; margin-left: 100px;}

    .a-1,.b-1{ width: 160px; height: 120px;}

    .a-1{ background-color: yellow; position: relative; z-index: 0;}

    .b-1{ background-color: blue; position: relative; z-index: 1; }

</style>

</head>

<body>

    <div class="a">这里是A的内容

        <div class="a-1">这里是A的子内容A-1</div>

    </div>

    <div class="b">这里是B的内容这里是B的内容

        <div class="b-1">这里是B的子内容B-1</div>

    </div>

</body>

...

aaarticlea/png;base64,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" alt="" width="266" height="261" />

我们认为同时将 position 设为 relative, absolute 或者 fixed, 并且 z-index 经过整数赋值的节点, 会被放置到一个与 DOM 不一样的层级树里面, 并且在层级树中通过对比 z-index 决定显示的层级. 上面的例子如果用层级树来表示的话, 应该如下图所示.

图中虽然 A-1 (z-index:0) 的值比 B-1 (z-index:1) 小, 但因为在层级树里 A (z-index:2) 和 B-1 在一个层级, 而 A 的值比 B-1 大, 根据从父规则, A-1 显示在 B-1 前面.

七、参与规则 2

前面提到的参与规则认为只要节点的 position 属性为 relative, absolute 或者 fixed, 即可参与层级比较, 其实不准确. 如果所有节点都定义了 position:relative, 并且将 z-index 设为整数值, 根据从父规则, 父节点的层级决定了子节点所在层级.

例子中 A, B-1, C 作为父节点, z-index 的值相同, 根据顺序规则, C 在 B-1 之前, B-1 在 A 之前; 又根据从父规则, 无论子节点的 z-index 值是什么, C-1-1-1 在 B-1-1 之前, B-1-1 在 A-1 之前.

如果我们将所有父节点的 z-index 属性去除, 诡异的事情发生了. IE6 和 IE7 浏览器显示效果不变, 而 W3C 浏览器的子节点不再从父, 而是根据自身的 z-index 确定层级.

根据默认值规则, IE6 / IE7 和 W3C 浏览器上的元素存在 z-index 默认值的区别. 我们相信, 仅当 position 设为 relative, absolute 或者 fixed, 并且 z-index 赋整数值时, 节点被放置到层级树; 而 z-index 为默认值时, 只在 document 兄弟节点间比较层级. 在 W3C 浏览器中, A, B-1 和 C-1-1 的 z-index 均为 auto, 不参与层级比较.

而在 IE6 和 IE7 中, 因为 z-index 的默认值是 0, 所以也参与了层级比较.

设置了 position 而没有 z-index 的节点虽然不参与层级树的比较, 但还会在 DOM 中与兄弟节点进行层级比较.

我们对上个例子改造一下, 将 B-1 的 position 属性删除后, W3C 浏览器显示如下图. 根据定位规则, A 和 C 会显示在 B-1 的前面; 而根据顺序规则, C 又显示在 A 前面.

在 IE6 和 IE7 中, 因为 A 和 C-1-1 设置了 position:relative, 而且 z-index 的默认值为 0, 所以也参与层级树比较, 所以有如下效果.

转自：http://www.xiaoxiangzi.com/Programme/CSS/7884.html