z-index 和 css 权威指南图 10-55答案

【问题标题】：z-index and css the definitive guide figure 10-55z-index 和 css 权威指南图 10-55
【发布时间】：2013-07-05 23:00:00
【问题描述】：

我正在阅读“CSS the Definitive Guide”第 3 版的第 10 章，图 10-55 的代码示例无法重现，我不知道出了什么问题。

具体是书中的代码说的

p {border: 1px solid; background: #DDD; margin: 0;}
b {background: #808080;}
em {background: #BBB;}
#one {position: absolute; top: 0; left: 0; width: 50%; height: 10em; z-index: 10;}
#two {position: absolute; top: 5em; left: 25%; width: 50%; height: 10em; z-index: 7;}
#three {position: absolute; top: 11em; left: 0; width: 50%; height: 10em; z-index: 1;}
#one b {position: absolute; right: -3em; top: auto; z-index: 36;}
#two em {position: absolute; bottom: -0.75em; left: 7em; right: -2em; z-index: -42;}
#three b {position: absolute; left: 3em; top: 3.5em; width: 25em; z-index:23;}

图 10-55 如下所示：

jsfiddle：http://jsfiddle.net/dunsondog109/WvJxR/

然而，

<html>
  <head>
    <style>
      p {
        border: 1px solid;
        background: #DDD;
        margin: 0;
      }
      b {
        background: #808080;
      }
      em {
        background: #BBB;
      }
      #one {
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 10em;
        z-index: 10;
      }
      #two {
        position: absolute;
        top: 5em;
        left: 25%;
        width: 50%;
        height: 10em;
        z-index: 7;
      }
      #three {
        position: absolute;
        top: 11em;
        left: 0;
        width: 50%;
        height: 10em;
        z-index: 1;
      }
      #one b {
        position: absolute;
        right: -5em;
        top: 4em;
        width: 20em;
        z-index: -404;
      }
      #two b {
        position: absolute;
        right: -3em;
        top: auto;
        z-index: 36;
      }
      #two em {
        position absolute;
        bottom: -0.75em;
        left: 7em;
        right: -2em;
        z-index: -42;
      }
      #three b {
        position: absolute;
        left: 3em;
        top: 3.5em;
        width: 25em;
        z-index: 23;
      }
    </style>
  </head>
  <body>
    <p id="one">
      This element contains normal text with in the browser. There is also some <em>[one]emphasized</em> text to place, or not, depending on the element in question. This element is ID'd "one," if that helps.<b>[one] a boldfaced element big enough to see</b>
    </p>
    <p id="two">
  This element contains normal text with in the browser. There is also some <em>[one]emphasized</em> text to place, or not, depending on the element in question. This element is ID'd "two," if that helps.<b>[two] a boldfaced element big enough to see</b>
    </p>
    <p id="three">
  This element contains normal text with in the browser. There is also some <em>[one]emphasized</em> text to place, or not, depending on the element in question. This element is ID'd "three," if that helps.<b>[three] a boldfaced element big enough to see</b>
    </p>
  </body>
</html>

生产

我的问题是：

为什么当 z-index 较低时，粗体元素会显示在其父元素的前面？此外，如何更正我的代码以使其看起来像书中的图片？

【问题讨论】：

Z-index 总是相对于它的父级。

标签： html css position z-index

【解决方案1】：

我怀疑图书错误（因为浏览器错误）

这就是我的怀疑。 CSS 权威指南第 3 版。 2006 年印刷。This website from 2008 提到 Firefox 得到了负面的渲染 z-index不正确（虽然我个人认为 Firefox 版本应该是它应该是这样的，规范应该改变；但那是我的观点）。在那篇文章中 IE 与 Firefox 的呈现差异就是您现在看到的差异（而且，FF 不再像以前那样呈现它，而是以“正确”的方式呈现）。因此，很可能这本书使用的图片来自 Firefox，并且当时“错误地”呈现。

因此，为了“正确”将其现在渲染为类似于书籍图像，除了auto（其中如果没有设置z-index，则为默认值，基本上等同于0)，因为其他任何东西都会建立一个新的堆叠上下文，并且它的子元素不会“落后于”其他元素。

So this fiddle uses the following z-index settings 保持#one 子元素的堆叠上下文等于与#two 和#three 的堆叠上下文相同，同时还将这些div 元素推到#one 下方（这给出了效果和书一样）：

#one     { /* none = z-index: auto; prevents new stacking context */ }
#two     { z-index:  -2;} /* we want it below both #one and its child <b> */
#three   { z-index:  -3;} /* we want it below #two */
#one b   { z-index:  -1;} /* push behind #one but stay in front of #two, etc. */
#two b   { z-index:  36;} /* this and all the rest are "irrelevant" to #one */
#two em  { z-index: -42;}
#three b { z-index:  23;}

Stacking contexts (note that besides position, opacity below 1 creates a new stacking context also) are complicated things at times，影响z-index rendering，有时让人头晕目眩，为什么有些东西不是你所期望的。当您为各种旧浏览器抛出渲染问题时（令人惊讶的是，在这里发现 FF 出现“错误”），这只会增加混乱。

希望这有助于解释您可能发生的事情以及您无法正确渲染的原因。

【讨论】：

哇。非常感谢您的详尽解释。是的，z-index 的预期行为有时似乎不直观。此外，特定浏览器上的预期行为更是如此。

【解决方案2】：

修复它：http://jsfiddle.net/WvJxR/5/

你必须给 div 一个相对位置才能隐藏。

类似的东西：

 #one b {
    position: relative;
    right: -5em;
    top: 4em;
    width: 20em;
    z-index: -404;
 }

【讨论】：

它还在段落的前面。我正在使用最新版本的 Safari。