2016-04-21 6 views
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; 
} 
+0

。 –

答えて

2

あなたは.container-bodyに新しいスタッキングコンテキストを確立する必要があります。

.container-body { z-index: 1; position: relative; /* ... */ } 

その後擬似要素に負のzインデックスを使用します。ここでは

.ribbon { /* no z-index, ... */ } 
.ribbon:before, .ribbon:after { z-index: -1; /* ... */ } 

は完全な例である:

あなたのHTMLを投稿する必要が

.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>

関連する問題