我通过在顶栏前后使用两个三 Angular 形使用 CSS3 创建功能区。但问题是三 Angular 形没有出现在顶栏后面，因此不提供丝带效果。我该怎么做？
查看现场演示: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"> </div>
<div class = "tri-r"> </div>
</div>
<div class = "main">
</div>
</div>
</body>
</html>
最佳答案
问题是您没有在 HTML 中正确组织元素。如果你想将一个元素放在另一个元素后面，最简单的方法是将它们放在相同的 DOM 级别，然后定义 z-index。另请记住，您不应为 z-index 赋予负值。
这是您的问题的一种解决方案:http://jsfiddle.net/rVe9M/2/
关于css - Z 索引不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8896378/