z-index和css权威指南图10-55
我正在阅读"CSS权威指南“第三版的第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较低时，为什么粗体元素显示在其父元素的前面？此外，我如何纠正我的代码，使其看起来像书中的图片？
回答 2
Stack Overflow用户
发布于 2013-07-07 08:10:40
我怀疑是图书错误(因为浏览器错误)
这就是我所怀疑的。CSS的权威指南第三版。印刷于2006年。This website from 2008提到火狐对负面z-index的渲染是不正确的(尽管我个人认为火狐的版本应该是这样的，规范应该改变；但这是我的观点)。在那篇文章中IE和Firefox渲染的不同之处在于你现在看到的不同(而且FF不再像以前那样渲染它，而是以“正确”的方式渲染)。因此，这本书中使用的图像很可能来自Firefox，并且当时呈现得“不正确”。
因此，要“正确”地使最上面的元素(#one)呈现与图书图像类似，除了auto (如果没有设置z-index，这是默认的，本质上等同于0)之外，不能给它自己的z-index，因为任何其他元素都将建立一个新的堆叠上下文，并且它的子元素不会“落后于”其他元素。
使div子元素的堆栈上下文与#two和#three的堆栈上下文相同，同时还将这些#one元素压到#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，有时会让人头晕目眩，为什么有些东西不在你期望的地方。当你为各种较老的浏览器添加渲染问题时(在这里的"error“中发现FF是令人惊讶的)，这只会增加混乱。
希望这有助于解释你可能发生的事情，以及为什么你不能正确地渲染它。
Stack Overflow用户
发布于 2013-07-06 17:27:44
要解决这个问题：http://jsfiddle.net/WvJxR/5/
你必须给div一个相对的位置来隐藏。
大概是这样的：
#one b {
position: relative;
right: -5em;
top: 4em;
width: 20em;
z-index: -404;
}https://stackoverflow.com/questions/17497861
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号