CSS Opacity屬性對層疊上下文的影響
阿新 • • 發佈：2019-02-03
今天在遇到一個opacity過渡的時候，遇到了一個奇怪的問題：
父元素設定了opacity。
子元素設定了z-index:-1
<div class="box" style="opacity:.7">
<img style="position:relative;z-index:-1" src="http://www.gbtags.com/gb/laitu/200" />
</div>
按我之前的理解，圖片應該是躲在.box元素後面的，結果，img卻安安靜靜的躺在.box上面…
WTF?
去網上查詢了下資料，原來是CSS層疊上下文搞的鬼。。。
當元素的opacity屬性不為1的時候，將會創造一個層疊上下文，則無論子元素的z-index為負多少，都將不能穿透父元素。
做個測試
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box {
opacity: .8;
padding: 20px;
background: blueviolet;
} 
滑鼠移入時，opacity為1，.box不具有層疊上下文，img穿透.box
除開opacity屬性，還有很多CSS屬性也會為元素建立層疊上下文
摘自張鑫旭大神的部落格
PS:有時候在開發WebAPP頁面的時候，會出現一些詭異的佈局錯亂，有時候可以無腦的設定 transform: translateZ(0);和position:relative，可以解決不少問題。