3

我正在阅读“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 如下所示：

图 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 较低时，粗体元素会显示在其父元素的前面？此外，如何更正我的代码以使其看起来像书中的图片？

4

2 回答 2

4

我怀疑图书错误（由于浏览器错误）

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

因此，为了“正确地”让它现在呈现类似于书籍图像，最上面的元素 ( #one) 不能被赋予它自己的z-index其他元素（auto如果设置为 no，这是默认值z-index，并且本质上等同于0），因为其他任何东西都会建立一个新的堆叠上下文，其子元素不会“落后”于其他元素。

因此，这个小提琴使用以下z-index设置来保持#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;}

堆叠上下文（请注意，除此之外position，opacity下面1还会创建一个新的堆叠上下文）有时是复杂的事情，会影响z-index渲染，有时会让人头晕目眩，为什么某些东西不在您期望的位置。当您为各种较旧的浏览器抛出渲染问题时（在这里发现 FF 出现“错误”令人惊讶），这只会增加混乱。

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

于 2013-07-07T00:10:39.513 回答
0

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

您必须为要隐藏的 div 提供相对位置。

像这样的东西：

 #one b {
    position: relative;
    right: -5em;
    top: 4em;
    width: 20em;
    z-index: -404;
 }
于 2013-07-06T09:27:43.923 回答