Z-Index doesn't work

Problem

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?

See live demo: http://jsfiddle.net/rVe9M/

The z-index property doesn't work and I've made sure that I've positioned all my elements.

/* 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;    
}
<html>
    <head>
        <title> Bharat Kashyap </title>
        <link rel = "stylesheet" href = "Style.css" />
        <link href='http://fonts.googleapis.com/css?family=Coming+Soon' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" type="text/css" href="Reset.css">
    </head>
    <body>
        <div class = "wrap">
                    <div class = "topbar">
                    <ul>
                        <li><a id = "home" href = "#"> Home </a></li>
                        <li><a id = "about" href = "#"> About </a></li>
                        <li><a id = "work" href = "#"> Work </a></li>
                        <li><a id = "contact" href = "#"> Contact </a></li>
                    </ul>    
                    <div class = "tri-l"> &nbsp; </div>
                    <div class = "tri-r"> &nbsp; </div>
                    </div>
            <div class = "main">
            &nbsp;
            </div>
        </div>    
    </body>    
</html>
Problem courtesy of: Bharat Kashyap

Solution

The problem is that you are not organizing the elements correctly in the HTML. If you want to place a element behind another, the easiest way is to place then at the same DOM level and then defining the z-index. Also keep in mind that you should not give negative values to the z-index.

Here is one solution for your problem: http://jsfiddle.net/rVe9M/2/

Solution courtesy of: John Louros

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.