为什么z-index需要大数？

Question

在我的previous question之后，似乎我必须使用大数字z-index来获得所需的结果，而在w3schools或我见过的任何其他网站中我都会使用较小的数字作为每一步您可以看到here定义一个新图层。或者在这里：

任何想法为什么这个例子只有当步骤是数百而不是单个单位步骤时才有效？ http://jsfiddle.net/0b7k768k/2/

由于

Answer 1

#orange_bar {
height: 60px;
background-color: #F8EBD2;
position: fixed;
z-index: 1;
top: 20px;
left: 0;
right: 0;
}

#content {
position: relative;
z-index: 2;
}

即使你给z-index赋予小的价值，它仍然很完美。在这种情况下，＃content的z-index应该比#orange_bar相对大。

Answer 2

z-index属性的效果只有在可以比较的情况下才能看到。该值不必非常大，但与您想要的元素相比，它应该更大或更小。其使用中的混淆是显而易见的，因为它只有在元素的位置设置为fixed，absolute或relative时才有效。详细了解http://www.smashingmagazine.com/2009/09/the-z-index-css-property-a-comprehensive-look/#why-does-it-cause-confusion