Z-Index不起作用

我使用CSS3創建功能區，在頂欄前後使用兩個三角形。但問題是三角形不會出現在頂欄後面，因此不提供功能區效果。我怎麼做？Z-Index不起作用

的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-index。另外請記住，您不應該給Z指數帶來負值。

這是您的問題的一種解決方案：http://jsfiddle.net/rVe9M/2/

來源

2012-01-17 14:55:13

謝謝！從現在開始，您的提示將會被記住。 – 2012-01-17 17:28:22

Z-Index不起作用

回答

相關問題