Question

我正在使用CSS3创建一个功能区，方法是在顶部栏之前和之后使用两个三角形。但问题是三角形不会出现在顶部栏后面，因此不提供色带效果。我该怎么做？

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>

Answer 1

问题是您没有在HTML中正确组织元素。如果要将元素放在另一个元素后面，最简单的方法是将其置于相同的DOM级别，然后定义z-index。另请注意，您不应该为z-index赋予负值。

以下是您的问题的一种解决方案：http://jsfiddle.net/rVe9M/2/

Z-Index不起作用

1 个答案: