Z-Index funktioniert nicht: vor &: nach

Ich versuche, ein Band wie das im Bild verknüpft, aber wenn ich z-Index verwenden, um die Kanten hinter dem Hauptteil des Bandes zu senden, verschwindet es vollständig hinter der Hintergrundfarbe der Seiten. Kann mir bitte jemand sagen, was mit meinem Code nicht stimmt? ribbon image Z-Index funktioniert nicht: vor &: nach

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

Die 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; 
}

Quelle

2016-04-21 Jaiela London

Sie benötigen eine HTML schreiben . –

Sie benötigen einen neuen Stapelkontext auf dem .container-body zu etablieren.

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

Verwenden Sie dann negative z-Indizierung auf den Pseudo-Elemente:

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

Hier ist ein vollständiges Beispiel:

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

Quelle

2016-04-21 20:31:03 Quantastical

Z-Index funktioniert nicht: vor &: nach

Antwort

Verwandte Themen