我正在尝试制作一个像链接图像中那样的丝带，但是当我使用 z-index 将边缘发送到丝带主要部分后面时，它完全消失在页面背景颜色后面。谁能告诉我我的代码有什么问题吗？ ribbon image
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Newsletter signup</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class = "header">
<h1 class = "logo">skillcrush</h1>
<div class="ribbon">
<p>the delightful way to learn</p>
</div>
</div><!--header-->
</div><!--container-->
</body>
</html>
CSS:
.container-body{
margin: 0 auto;
width:1200px;
height:702px;
background-color:#fff0da;
z-index: auto;
}
.ribbon{
text-align: center;
position: absolute;
left:0;
right:0;
top:120px;
margin-left: auto;
margin-right: auto;
font-size:16px;
background-color:#f6515d;
height:28px;
width:260px;
color:rgb(255, 240, 218);
border: solid #fff0da 2px;
z-index: 2;
}
.ribbon:before
{
content: ' ';
position:absolute;
width: 30px;
height: 0;
left: -30px;
top: -10px;
border-width: 20px 10px;
border-style: solid;
border-color: #f6515d #f6515d #f6515d transparent;
z-index: 1;
}
.ribbon:after
{
content: ' ';
position:absolute;
width: 30px;
height: 0;
right:-30px;
top: -10px;
border-width: 20px 10px;
border-style: solid;
border-color: #f6515d transparent #f6515d #f6515d;
z-index: 1;
}
最佳答案
您需要在.container-body 上建立一个新的堆栈上下文。
.container-body { z-index: 1; position: relative; /* ... */ }
然后在伪元素上使用负 z 索引:
.ribbon { /* no z-index, ... */ }
.ribbon:before, .ribbon:after { z-index: -1; /* ... */ }
这是一个完整的例子:
.container-body{
margin: 0 auto;
width:1200px;
height:702px;
background-color:#fff0da;
z-index: 1;
position: relative;
}
.ribbon{
text-align: center;
position: absolute;
left:0;
right:0;
top:120px;
margin-left: auto;
margin-right: auto;
font-size:16px;
background-color:#f6515d;
height:28px;
width:260px;
color:rgb(255, 240, 218);
border: solid #fff0da 2px;
}
.ribbon:before
{
content: ' ';
position:absolute;
width: 30px;
height: 0;
left: -30px;
top: -10px;
border-width: 20px 10px;
border-style: solid;
border-color: #f6515d #f6515d #f6515d transparent;
z-index: -1;
}
.ribbon:after
{
content: ' ';
position:absolute;
width: 30px;
height: 0;
right:-30px;
top: -10px;
border-width: 20px 10px;
border-style: solid;
border-color: #f6515d transparent #f6515d #f6515d;
z-index: -1;
}<div class="container-body">
<div class="ribbon">Test</div>
</div>关于html - Z-index 不适用于 :before & :after，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36779464/