有沒有辦法在css中重置堆棧上下文？

Question

我很難得到正確的堆疊順序。有沒有一種物理的方式來渲染這個權利（上面的掩碼，以及掩碼之上，而下面的掩碼保持在下面）而不改變HTML？ 編輯：刪除.bow-mask上的z-index是不幸的，也是不可能的。

HTML：

<div class="mask"></div> 
<div class="below-mask"> 
    <div class="above-mask"></div> 
</div> 

CSS：

.mask{ 
    position: absolute; 
    width: 100%; height: 100%; 
    top: 0; left: 0; 
    background: rgba(0,0,0,0.3); 
    z-index: 10; 
} 

.below-mask{ 
    position: absolute; 
    width: 15em; 
    height: 15em; 
    background: blue; 
    z-index: 1; 
} 

.above-mask{ 
    position: absolute; 
    width: 10em; height: 10em; 
    top: 2.5em; left: 2.5em; 
    background: yellow; 
    z-index: 100; 
} 

codepen：http://codepen.io/anon/pen/WrXbaL

編輯：How it looks now - 我正在做第一部曲查看。我希望需要解釋的元素位於面罩之上（這裏是搜索面板），而其他所有元素都隱藏在下面。

Answer 1

好吧，我很愚蠢。我不需要一個面具，我可以只使用一個巨大的盒子陰影或輪廓：

outline: 1000em solid rgba(0,0,0,0.3); 

它的確有竅門。 http://codepen.io/anon/pen/eJeNVg