我正在阅读“CSS 权威指南”第 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 较低时粗体元素出现在它的父元素前面？此外，如何修改我的代码，使其看起来像书中的图片？
最佳答案
我怀疑图书有误(因为浏览器错误)
这是我的怀疑。 CSS 权威指南 第三版。于 2006 年打印。This website from 2008提到 Firefox 得到了负 z-index 不正确 的渲染(虽然我个人认为 Firefox 版本应该是这样的，规范应该改变；但那是我的观点)。那篇文章中 IE 与 Firefox 的渲染差异就是您现在看到的差异(而且，FF 不再像以前那样渲染它，而是“正确”的方式)。因此，这本书使用的图像很可能来自 Firefox，并且当时呈现“错误”。
因此，要“正确地”让它现在呈现类似于书本图像的效果，最上面的元素 (#one) 不能被赋予它自己的 z -index 不同于 auto(如果未设置 z-index，则为默认值，并且本质上等同于 0)为其他任何东西都会建立一个新的堆叠上下文，并且它的子元素不会“落后于”其他元素。
So this fiddle uses the following z-index settings保持 #one child 的堆栈上下文 等于 到 #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)，这只会增加困惑。
希望这有助于解释您可能发生的情况以及无法正确呈现的原因。
关于html - z-index 和 css 权威指南 图 10-55，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17497861/