设置z-index为负数后元素没有被隐藏

面试时，面试官为怎么隐藏一个元素，完全没准备，只说了display:none和visibility：hidden，之后网上查了方法，还有z-index设为负数，于是自己写了段代码试试，不起作用

<div class="box1">test</div>

.box1 { z-index: -1; }

原因：

首先，需要知道关于层叠上下文的知识，可以看MDN上的解释，解释的非常清楚，引用其中一句话

我们认识到某些元素的渲染顺序是由其 z-index 的值影响的。这是因为这些元素具有能够使他们形成一个层叠上下文的特殊属性。 

于是我通过position:relative创建了层叠上下文，CSS如下：

.box1 {
        position: relative;
        z-index: -1;
    }

依旧不起作用，但是在对box1的父元素，我这里就是body，添加了背景颜色之后，box1就被隐藏了，所以遮盖住box1的是父元素的背景色。