html - Z-index not working on :before & :after -

-

i'm trying make ribbon 1 in image linked, when use z-index send edges behind main part of ribbon disappears behind pages background color. can please tell me whats wrong 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 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; }

you need establish new stacking context on .container-body.

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

then use negative z-indexing on pseudo-elements:

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

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


Comments

Post a Comment

Popular posts from this blog

html - Styling progress bar with inline style -

-
i trying set progress bar color red using inline style. need in way because have access <body> part of document. style need apply: progress { color: red } progress::-moz-progress-bar { background: red;} progress::-webkit-progress-value { background: red; } progress[aria-valuenow]:before { background: red; } i tried <progress style="background: red;"> incorrect effect, progress bar color turns blue red background. guide right direction desired style? thank in advance. here live example: https://jsfiddle.net/z36d3f6l/
Read more

java - Oracle Sql developer error: could not install some modules -

-
i have downloaded fresh copy of sqldeveloper ( sqldeveloper-4.1.3.20.78-no-jre ) oracle website. when unzip , lauch gui, keep getting following error message: warning - not install modules: dynamic module config - no module providing capability org.netbeans.netbinox found. my system: windows 7 32 bit hp probook. jdk 1.6 , 1.7, 1.8 available in java/jdk subdirectory. netbeans 8.0.2 installed finally got way out after dirty hours. extracted sqldeveloper zip in nested directory. i.e: e://a/b/c/sqldeveloper. starting sqldeveloper gui above directory threw erros. solution: go in c:\users**username**\appdata\roaming : delete sql developer , sqldeveloper folders extract sql developer zip in new non nested directory. i.e: e:// start , should work now reference: https://community.oracle.com/thread/3870680?start=0&tstart=0
Read more

How to use autoclose brackets in Jupyter notebook? -

-
this may sound silly question, how make use of autoclose brackets in jupyter notebook? example, when type print( jupyter notebook auto-closes brakets print() and places cursor inside. type argument, say print(1 + 1) now cursor between second 1 , right bracket ) . key navigate right of ) ? of course can press end or → or ) achieve this, not seem save time, purpose of brackets autoclose suppose? thanks in advance.
Read more