关于z-index

想实现这种效果：

下面的代码实现的效果是这样的：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <style type="text/css">
    a {
        width: 50px;
        height: 50px;
        display:black;
        border-radius: 50%;
        border: 1px solid;
        position: relative;
        background:block;
        z-index: 10;
    }
    
    a:before {
        content: "";
        position: absolute;
        bottom: -8px;
        top: -8px;
        left: -8px;
        right: -8px;
        z-index: -1;
        border-radius: 50%;
        background-color: red;
    }
    </style>
    <a href=""></a>
</body>

</html>

一开始是这样想的，只要a标签比伪元素的z-index大就行，于是给a标签的z-index就定为10，伪元素的定为-1，但是最后伪元素反而把a标签覆盖住了。当我把a标签的z-index去除后却实现了这个效果。

html css

阅读 4.1k

4 个回答

残阳映枫红

✓ 已被采纳

首先要知道两点:

即便是 position 不为 static 的元素, 如果没有指定一个非 auto 值的 z-index, 该元素就不会建立一个层叠上下文.
同一个层叠上下文里面, 层叠顺序从后向前依次是: 背景和边框、负z-index、块级盒、浮动盒、行内盒、z-index:0、正z-index.

因此题主的困惑的核心就在于, a 是否有 z-index 指定值所带来的变化.

第一种情况, a 没有 z-index 指定值. 这时候, a 不建立新的层叠上下文, a 和 a:before 都处在根层叠上下文之中. 根据层叠规则, a 叠在 a:before 上面, 因此 a 的黑色背景在 a:before 的红色背景之上;

第二种情况, a 指定了任意非 auto 的 z-index 值, a 建立一个新的层叠上下文, a 自己处在根层叠上下文, 而 a:before 在 a 创建的层叠上下文之中, a:before 的定位就得放到这新上下文中去看. 根据规则, a 的黑色背景应当在 a:before 的红色背景之下, 故视觉上就看不到 a 的黑色圈圈了.