【发布时间】：2023-03-20 15:18:01
【问题描述】：
好的，我有一个指向下面 JSFIDDLE 的链接。我一直在研究一个网站的粗糙外观，我似乎遇到了一个关于不透明度和 z-index 的奇怪问题。我已经阅读了一些内容，但仍然无法完全理解为什么在渲染时不透明度会以这种方式影响我的 z-index。当我的下拉菜单出现时，z-index 位于内容页面的后面，直到过渡效果结束。为什么会发生这种情况？
*{
background:#ffffff;
color:#0099ff;
margin:0 auto;
text-align:center;
padding:0;
}
.container{
width:relative;
margin:0 auto;
min-width:775px;
}
.banner{
position:relative;
min-height:50px;
max-height:200px;
margin-left:100px;
margin-right:100px;
}
.menu{
z-index:1;
}
.menu ul /* main UL */{
list-style:none;
margin:0;
padding:0;
z-index:30;
background:#000000;
opacity:.2;
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
-ms-transition: all 0.8s;
-o-transition: all 0.8s;
transition: all 0.8s;
}
.menu ul:hover /* main UL Hover*/{
z-index:3;
opacity:1;
}
.menu ul li /* main LI */{
color:#000000;
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #ffffff;
border-radius:6px;
cursor: pointer;
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
-ms-transition: all 0.8s;
-o-transition: all 0.8s;
transition: all 0.8s;
}
.menu ul li:hover /* main LI hover function */{
background:#9fff80;
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
-ms-transition: all 0.8s;
-o-transition: all 0.8s;
transition: all 0.8s;
}
.menu ul li ul /* secondary UL */{
background: #ffffff;
position: absolute;
top: 47px;
left: 0px;
display: none;
opacity: 0;
visibility: hidden;
}
.menu ul li ul li /* secondary LI */{
width:100px;
padding: 15px 20px;
}
.menu ul li:hover ul /* secondary LI function hover over main LI */{
display: block;
opacity: 1;
visibility: visible;
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
-ms-transition: all 0.8s;
-o-transition: all 0.8s;
transition: all 0.8s;
}
.contents{
z-index:0;
border-radius: 6px;
position:relative;
min-height:100px;
margin-top:20px;
width:1000px;
padding:20px;
} <html>
<head>
<link rel="stylesheet" href="CSS/main.css" type="text/css" charset="utf-8" />
</head>
<header>
<meta name="Author" content="Nathan Hartmann">
</header>
<body>
<div class="container"> <!-- Main Container -->
<div class="banner"><img src="pictures/bannerTestPage.jpg"></div>
<div class="menu"> <!-- Menu Container -->
<ul> <!-- Main UL -->
<li onclick="top.location.href='#'">Home</li> <!-- Main LI -->
<li onclick="top.location.href='#'">Photos <!-- Main LI -->
<ul> <!-- Secondary UL -->
<li onclick="top.location.href='#'">Family</li> <!-- Secondary LI -->
<li onclick="top.location.href='#'">Nature</li> <!-- Secondary LI -->
<li onclick="top.location.href='#'">Personal</li> <!-- Secondary LI -->
</ul> <!-- Secondary UL END -->
</li> <!-- Main LI END -->
<li onclick="top.location.href='#'">Shopping</li> <!-- Main LI -->
<li onclick="top.location.href='#'"> Contact</li> <!-- Main LI -->
</ul> <!-- Main UL END -->
</div> <!-- Menu Container END -->
<div class="contents"> <!-- Contents Container -->
</div> <!-- Contents Container END -->
</div> <!-- Main Container END -->
</body>
</html>【问题讨论】：