CODEWITHSUNDEEP
htmlcssz-index
Jaiela London
Jaiela London

Reputation: 21

Z-index not working on :before & :after

I'm trying to make a ribbon like the one in the image linked, but when I use z-index to send the edges behind the main part of the ribbon it disappears completely behind the pages background color. Can anyone please tell me whats wrong with my code?ribbon image

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

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

Upvotes: 1

Views: 1137

Answers (1)

jeffjenx
jeffjenx

Reputation: 17487

You need to establish a new stacking context on the .container-body.

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

Then use negative z-indexing on the pseudo-elements:

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

Here is a full example:

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

Upvotes: 4

Related Questions