好的，我有一个指向下面 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>最佳答案
发生这种情况是因为 .menu 属性 position 设置为 static 而不是 relative。
改变
.menu{
z-index:1;
}
到
.menu{
position:relative;
z-index:1;
}
关于html - HTML5 和 CSS3 中不透明的 z-index 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38989087/