css - 关于z-index
本文介绍了css - 关于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去除后却实现了这个效果。
解决方案
首先要知道两点:
即便是
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值
这篇关于css - 关于z-index的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
