title: Z-Index doesn't work
body: <p>I'm creating a ribbon with CSS3 by using two triangles before and after the topbar. But the problem is that the triangles don't appear behind the topbar, therefore do not provide the ribbon effect. How do I do that?</p>
  
  <p>See live demo: <a href="http://jsfiddle.net/rVe9M/" rel="nofollow">http://jsfiddle.net/rVe9M/</a></p>
  
  <p>The z-index property doesn't work and I've made sure that I've positioned all my elements.</p>
  
  
  
  <pre class="lang-css prettyprint-override"><code>/* Style.css 
     Designed by Bharat Kashyap
     Powered by his #e3e3e3 cells 
  */
  
  body {margin : auto;
        -webkit-font-smoothing : anitialiased;            
  }
  
  .topbar {background-color : #585858;
           height : 80px;
           margin : auto;    
           margin-top : 80px;
           width     : 860px;
           box-shadow : 3px 3px 11px rgba(33,33,33,1),
                         3px -3px 11px rgba(33,33,33,1);     
            position: relative;
            z-index : 1;
  }        
  
  .topbar ul { text-align : center;
               padding-top : 20.5px; 
               position : relative;
  
  
  }
  
  .topbar a {text-decoration : none;
              color : #f4f4f4;
              padding-left : 50px;
              padding-top : 20px;
              position : relative;
  
  
  }    
  
  
  .topbar ul li {list-style-type : none;
                  display : inline;
                  padding-right : 60px;
                  text-shadow : 1px 1px 1px #f4f4f2,
                                1.75px 1.75px 1px #f4f4f4;    
                  color : #f4f4f4;
                  font-family : 'Coming Soon' , sans-serif;
                  font-size : 1.8em;
                  position : relative;
  
  
  }
  
  #home {background : url(Home.png) 0 0 no-repeat;
          background-position : -10px 4px;
          transition:         background-position 0.4s;
      -moz-transition:     background-position 0.4s; /* Firefox 4 */
      -webkit-transition: background-position 0.4s; /* Safari and Chrome */
      -o-transition:         background-position 0.4s; /* Opera */
      position : relative;
  
  }
  
  #about {transition:         text-shadow 0.3s;
      -moz-transition:     text-shadow 0.1s; /* Firefox 4 */
      -webkit-transition: text-shadow 0.1s; /* Safari and Chrome */
      -o-transition:         text-shadow 0.1s; /* Opera */
  }        
  
  #work {    transition:         text-shadow 0.1s;
      -moz-transition:     text-shadow 0.1s; /* Firefox 4 */
      -webkit-transition: text-shadow 0.1s; /* Safari and Chrome */
      -o-transition:         text-shadow 0.1s; /* Opera */
  }        
  
  #contact {transition:         text-shadow 0.1s;
      -moz-transition:     text-shadow 0.1s; /* Firefox 4 */
      -webkit-transition: text-shadow 0.1s; /* Safari and Chrome */
      -o-transition:         text-shadow 0.1s; /* Opera */            
  }
  
  
  #home:hover {background-position: -10px -65px;
               color : #585858;
               text-shadow : 2px 2px 7px #f4f4f4;
  }
  
  #about:hover {color : #585858;
               text-shadow : 2px 2px 7px #f4f4f4;
  }
  
  #contact:hover {background-position: -10px -58px;
                  color : #585858;
               text-shadow : 2px 2px 7px #f4f4f4;
  }
  
  #work:hover {background-position: 3.8px -72.5px;
               color : #585858;
               text-shadow : 2px 2px 7px #f4f4f4;
  }
  
  .tri-l {
  
          height : 0px;
          width :  0px;
          position : absolute;
          top : 60px;
          left : -20px;
          z-index : -1;
          border : 25px solid #585858;
          border-color :  #585858 #585858 transparent transparent ;    
  
  }
  
  .tri-r {
  
          height : 0px;
          width :  0px;
          position : absolute;
          top : 60px;
          right : -28px;
          z-index : -2;
          border : 25px solid #585858;
          border-color :   #585858 transparent  transparent #585858;    
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt; Bharat Kashyap &lt;/title&gt;
          &lt;link rel = "stylesheet" href = "Style.css" /&gt;
          &lt;link href='http://fonts.googleapis.com/css?family=Coming+Soon' rel='stylesheet' type='text/css'&gt;
          &lt;link rel="stylesheet" type="text/css" href="Reset.css"&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class = "wrap"&gt;
                      &lt;div class = "topbar"&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a id = "home" href = "#"&gt; Home &lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a id = "about" href = "#"&gt; About &lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a id = "work" href = "#"&gt; Work &lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a id = "contact" href = "#"&gt; Contact &lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;    
                      &lt;div class = "tri-l"&gt; &amp;nbsp; &lt;/div&gt;
                      &lt;div class = "tri-r"&gt; &amp;nbsp; &lt;/div&gt;
                      &lt;/div&gt;
              &lt;div class = "main"&gt;
              &amp;nbsp;
              &lt;/div&gt;
          &lt;/div&gt;    
      &lt;/body&gt;    
  &lt;/html&gt;
  </code></pre>