Question

我很难获得正确的堆叠订单。有没有物理方法来渲染这个权利（.above-mask正好，在掩码之上，而.below-mask保持在下面）而不更改html？编辑：遗憾的是，删除.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;
}

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

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

1 个答案: