合併兩個不同父代的嵌套元素的z索引及其堆棧上下文

Question

我一直在網上搜索我的問題的解決方案。到目前爲止，我發現的所有文件都暗示我想實現的目標是不可能的。那麼，是這樣嗎？用文字描述問題：

• 我有幾個實體，其中每個實體都附加了一個半透明覆蓋層。
• 覆蓋層必須呈現落後於所有其他實體，包括父實體。
• 我在下圖中提供了一個示例。現在

，挑戰的部分是這兩個簡單的規則：

• Parent Entity A和Parent Entity B必須兄弟姐妹彼此
• Overlay A必須是孩子Parent A，和同去爲Overlay B

我們可以欺騙堆疊上下文來實現下面的視覺效果嗎？

JS解決方案也可能是受歡迎的，但是知道我在使用React，並且我不能直接執行DOM操作，並且父級關係是必須的。

這裏有一個JS fiddle playground來幫助你實驗。小提琴不是解決方案，它作爲兄弟姐妹覆蓋到父實體。

嘗試在他們的父母內嵌入疊加層。

Answer 1

您可以從實體刪除z-index，以防止他們從創建堆疊上下文，並使用負z-index在重疊區放置在他們身後。

在下面的代碼中，我通過僞元素定義了覆蓋因爲語義，但是對於真實的子元素，它將完全相同。

#entities-wrapper { 
 
    position: relative; /* Only the wrapper (and overlays) establish */ 
 
    z-index: 0;   /* stacking contexts, entities don't.  */ 
 
} 
 
.entity, .entity::after { 
 
    position: absolute; 
 
} 
 
.entity { /* Do not use z-index here */ 
 
    width: 100px; 
 
    height: 100px; 
 
    text-align: center; 
 
    font-size: 16px; 
 
    line-height: 100px; 
 
} 
 
.entity::after { /* This is the overlay */ 
 
    content: ''; 
 
    display: block; 
 
    left: 50%; 
 
    top: 50%; 
 
    margin-left: -150px; 
 
    margin-top: -150px; 
 
    width: 300px; 
 
    height: 300px; 
 
    background: rgba(0,0,0,0.25); 
 
    border-radius: 150px; 
 
    z-index: -1; /* Behind the entities */ 
 
} 
 
#a { 
 
    background: red; 
 
    top: 150px; 
 
    left: 200px; 
 
} 
 
#b { 
 
    background: yellow; 
 
    top: 150px; 
 
    left: 350px; 
 
}

<div id="entities-wrapper"> 
 
    <div id="a" class="entity">parent entity A</div> 
 
    <div id="b" class="entity">parent entity B</div> 
 
</div>