z-index與HTML5和CSS3中的不透明度問題

好吧，我有一個鏈接到下面的JSFIDDLE。我一直在研究一個網站的粗糙外觀，我似乎遇到了一個不透明和z-index的奇怪問題。我已經做了一些閱讀，但仍然無法完全理解爲什麼不透明度在渲染時以這種方式影響我的z-index。當我的下拉菜單出現時，z-index位於內容頁面後面，直到轉換效果結束。爲什麼會發生這種情況？z-index與HTML5和CSS3中的不透明度問題

HTML

</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>

CSS

*{ 
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; 
}

https://jsfiddle.net/kewh2e1n/

來源

2016-08-17 nathan hartmann

這是怎麼回事，因爲.menu財產position是SE t改爲static而不是relative。

變化

.menu{ 
    z-index:1; 
}

到

.menu{ 
    position:relative; 
    z-index:1; 
}

jsfiddle

來源

2016-08-17 06:34:29 QoP

這個工作！我實際上找到了答案，但這也起作用！你太棒了！ –

z-index與HTML5和CSS3中的不透明度問題

回答

相關問題