有没有办法在 css 中重置堆叠上下文？

Question

我很难获得正确的堆叠顺序。有没有一种物理方法可以在不改变 html 的情况下正确渲染（.above-mask 好吧，在 mask 上方，而 .below-mask 保持在下方）？编辑：不幸的是，删除 .below-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;
}

代码笔：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

有没有办法在 css 中重置堆叠上下文？

is there a way to reset a stacking context in css?

html

css

z-index