層疊上下文。只是針對子元素器作用的。 2個圖片兄弟元素。都這是z-index=3都是層疊上下文。后來居上原則ok

層疊上下文的border 和背景在最下面。那第一張圖片按理說不應該被第二種圖片的背景（箭頭指示擋住啊。）這是我一開始的錯誤立即理解。所以說層疊上下文這個比較的概念指示針對子元素和父元素比較用的到

因為默認的z-index:auto并不會有層疊上下文，所以.box不設(shè)置z-index:0時，沒有層疊上下文，是一個普通元素，而負值的z-index只會比有層疊上下文的background/border層級高，所以自然就沒有.box層級高，所以被覆蓋了；

而當設(shè)置了.box z-index:0時，.box就有了層疊上下文，background也就是有層疊上下文的background，因此它的層級會比z-index:-1要低，所以被圖片覆蓋了。

不知道這樣你能不能懂。

設(shè)置了定位，z-index默認是auto，前提沒設(shè)置z-index。

當.box設(shè)置z-index后就創(chuàng)建了層疊上下文，background是在負z-index之下的。如果.box中有個圖片的話這個圖片會在z-index:-1的圖片之上

<div?id="header">????
<div?class="page-container"?id="nav">????
<div?id="logo"?class="logo"><a?href="/"?target="_self"?class="hide-text">

設(shè)置定位的話，元素會有z-index，如果不設(shè)置z-index的值，默認是auto。box的z-index比較是在一個層疊上下文中比較的