z-index的负值使用

有时候遇到这种情况，一个页面中我们设置了header和背景图，
这个时候我们不想把背景图的图片放到header标签前，应该怎么办

代码实例
html

<div class="d1"></div>
<div class="d2"></div>

css

.d1{
           width: 100px;
           height: 100px;
           background-color: red;
       }
        .d2{
            width: 100px;
            height: 100px;
            background-color: yellow;
            position: absolute;
            top: 0;
            z-index:-111;
        }

只需要让d2的优先级小于d1即可