Z-インデックスが機能しない

私はトップバーの前後に2つの三角形を使用してCSS3でリボンを作成しています。しかし、問題は、三角形がトップバーの後ろに表示されないため、リボン効果を提供しないことです。それ、どうやったら出来るの？Z-インデックスが機能しない

はライブデモを参照してください：http://jsfiddle.net/rVe9M/

のz-indexプロパティは機能しませんし、私はすべての私の要素を配置したことを確認しましたしました。

/* 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>

出典

2012-01-17 Bharat Kashyap

問題は、HTMLで正しく要素を組織していないということです。要素を別の要素の背後に配置する場合は、同じDOMレベルに配置してからZ-インデックスを定義するのが最も簡単な方法です。また、Zインデックスに負の値を与えてはいけないことにも留意してください。ここで

は、あなたの問題の一つの解決策は以下のとおりです。http://jsfiddle.net/rVe9M/2/

出典

2012-01-17 14:55:13

ありがとうございました！あなたのヒントは、今後も心に留めておきます。 –

Z-インデックスが機能しない

答えて

関連する問題