0
イメージのリンクのようなリボンを作ろうとしていますが、Z-インデックスを使用してリボンの主要部分の後ろにエッジを送信すると消えます完全にページの背景色の背後にある。誰も私のコードで何が間違っているか教えてもらえますか? ribbon imageZ-indexが機能していない:before&:after
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;
}
。 –