如何使用z-index = -1 隐藏元素

创建层叠上下文

Groups of elements with a common parent that move forward or backward together in the stacking order make up what is known as a stacking context.

参考stackoverflow上的回答，会创建层叠上下文的主要为：

1. 根节点，可认为是html。Any element that doesn’t already participate in a local stacking context (generated by any of the other scenarios below) will participate in the root stacking context instead.
2. Setting z-index to anything other than auto on an element that is
   positioned (i.e. an element with position that isn’t static).position:fixed在不同浏览器上表现不一样
   Another exception to this is with a flex item. Setting z-index on a flex item will always cause it to establish a stacking context even if it isn’t positioned.
3. Setting opacity to anything less than 1.

4. Transforming the element:

    1. Setting transform to anything other than none. 
    2. Setting transform-style to preserve-3d.      
    3. Setting perspective to anything other than none.
   

5. Creating a CSS region: setting flow-from to anything other than none
   on an element whose content is anything other than normal.

6. In paged media, each page-margin box establishes its own stacking
   context.

7. In filter effects, setting filter to anything other than none.

8. In compositing and blending, setting isolation to isolate.

9. In will change, setting will-change to a property whose any
   non-initial value would create a stacking context.

层叠顺序

以下摘录至what on one told you about z-index
1. The stacking context’s root element
2. Positioned elements (and their children) with negative z-index values (higher values are stacked in front of lower values; elements with the same value are stacked according to appearance in the HTML)
3. Non-positioned elements (ordered by appearance in the HTML)
4. Positioned elements (and their children) with a z-index value of
auto (ordered by appearance in the HTML)
5. Positioned elements (and their children) with positive z-index
values (higher values are stacked in front of lower values; elements
with the same value are stacked according to appearance in the HTML)

Note: positioned elements with negative z-indexes are ordered first within a stacking context, which means they appear behind all other elements. Because of this, it becomes possible for an element to appear behind its own parent, which is normally not possible. This will only work if the element’s parent is in the same stacking context and is not the root element of that stacking context. A great example of this is Nicolas Gallagher’s CSS drop-shadows without images. example

如果要了解z-index=-1使用时到底发生什么，要注意note里面的一句话：This will only work if the element’s parent is in the same stacking context and is not the root element of that stacking context。
然后，我就按照我的理解写了一个demo,可是并没有隐藏。（这是下面的例子，代码略有不同demo）
html:

  <div class="outer">
    <p>outer</p>
    <div class="inner">
      <p>inner</p>
      <!--<div> -->
        <button class="btn">huhu</button>
        <p class="inner-inner">inner-inner</p>
      <!--</div>-->
    </div>
  </div>

.outer {
  position: relative;
  z-index:0;
  background-color: blue
}

.inner-inner{
  position: relative;
  z-index: -1;
  background-color: brown
}
.btn{
  position: absolute;
  top: 70px;
  z-index:-4
}

这个是满足条件的，但是.inner-inner还是可以看见，不过.btn将会出现在其后面。这一点证明z-index为负数起了作用，只是没有被隐藏起来。
我想了很久，注意到这个层叠顺序的根元素到底应该如何理解呢？张鑫旭将其解释为了层叠上下文的background和border，但是z-index为负数的元素是始终在其当前上下文的背景前的。挡住它的应该是其父元素的background。前例中如果对.inner设置背景色或者对包裹.inner-inner的div元素设置背景色就可以了。

为了便于大家直观看，可以看这个例子codepen，outer设置背景色，z-index =-1成功；但是注释掉背景色，因为是层叠上下文的root element，所以按钮的z-index = -100设置不了。