Search code examples
htmlcssz-index

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

I'm having a hard time getting right stacking order. Is there a physical way to render this right (.above-mask being, well, above mask, while .below-mask stays below) without changing html? EDIT: Removing z-index on .below-mask is, unfortunately, also impossible.

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

EDIT: How it looks now - I'm making a first-steps view. I wanted elements that need to be explained to be above the mask (here it would be the search panel), while everything else stays neatly hidden below.

Solution

  • Okay, I'm stupid. I don't need a mask, I can just use eiter a huge box shadow or an outline:

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

    It does the trick. http://codepen.io/anon/pen/eJeNVg