极客观点
项目管理
HarmonyOS
想实现这种效果：
下面的代码实现的效果是这样的：
<!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去除后却实现了这个效果。
首先要知道两点:
即便是
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的黑色圈圈了.以下是原答案.
a的background值拼写对, 不是block是black不要指定
a的z-index值