位置：固定z-index相對於其父級的z-index？

Question

我在一個相對定位的元素中有一個固定的位置元素，只要我關注的position: relative元素不應該對position: fixed有任何影響position: fixed （固定元素相對於窗口定位，對嗎？）。

但是，固定元素z-index似乎是由它的父級繼承的，它的z-index不能高於其父級的z-index。

我希望我有意義嗎？ 下面是我正在談論的HTML示例：

 .outer { position: relative; z-index: 2; } .inner { background: #fff; left: 50px; position: fixed; top: 40px; z-index: 1000000; } .fade { background: #555; bottom: 0; left: 0; opacity: 0.5; position: fixed; right: 0; top: 0; z-index: 3; } 

 <div class="outer"> <div class="inner">testing testing</div> </div> <div class="fade"></div> 

如果您更改以下內容：

.outer { position: relative; z-index: 4; }

然后.inner元素出現在淡入淡出元素的前面。

我發現這種行為非常奇怪...有沒有辦法在不移動.inner div或改變.inner div的CSS的情況下解決這個.outer ？

以上代碼示例的小提琴：

http://jsfiddle.net/n2Kq5/

http://jsfiddle.net/U8Jem/1/

Answer 1

簡而言之，是的，在給定父級的z-index定義的情況下， position:fixed的元素受其父級的z-index限制。

悲傷地告訴你，但你想要的是目前還不可能。 獲得所需效果的唯一方法是更改HTML或從outer 刪除z-index 。

更改HTML選項

第一個選項是將inner外部的outer ，這看起來是這樣 。

HTML修復的第二個選項是在outer移動fade （甚至使用相同的CSS） - 這里的演示 。

第三種選擇是將fade置於outer ，然后將inner置於fade內部，但這需要使用rgba顏色和不透明度 - 該演示可在此處找到 。

更改CSS選項

使用當前相同的HTML，您可以獲得的最接近的事情是刪除outer的z-index - 這里是Demo 。 您可能會認為您可以簡單地將每個元素的z-index遞增2，但這不起作用，因為子元素不能具有比其父元素更高的z-index（如果設置了父元素的z-index）。

---

說明

如果你考慮一下， fade和outer是同一水平。 你要做的就是讓fade保持在同一水平，但也要保持在上面的水平，這是不可能的。 這就像試圖同時在建築物的兩個樓層，它無法完成。

雖然你需要的東西與這篇文章沒有直接關系，但是菲利普沃爾頓創建了一篇關於z-index和opacity對它們的影響的精彩帖子，這對於看這個問題的其他人來說可能是有用的。