z-index和css权威指南图10-55
[英]z-index and css the definitive guide figure 10-55
问题描述
我正在阅读“CSS the 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较低时，为什么粗体元素出现在它的父元素前面？ 此外，如何更正我的代码使其看起来像书中的图片？
2 个解决方案
解决方案1
4 已采纳 2013-07-07 00:10:39
我怀疑书籍错误（由于浏览器错误）
这是我怀疑的。 CSS权威指南第3版。 这个网站从2008年开始提到，Firefox得到负面z-index的渲染不正确 （虽然个人而言，我认为Firefox版本应该是它应该是什么，规格应该改变;但这是我的意见）。 在这篇文章中IE与Firefox的呈现差异是你现在看到的差异（而且，FF不再像过去那样呈现它，而是“正确”的方式）。 因此，用于本书的图像很可能来自Firefox并且当时呈现“错误”。
因此，为了“正确”使它现在呈现类似于书籍图像，最顶层的元素（ #one ）不能给出自己的z-index而不是auto （如果没有设置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 ，低于1 opacity也会创建一个新的堆叠上下文）有时候是复杂的事情 ，会影响z-index渲染 ，有时候会让人头脑发挥为什么某些东西不在你期望的地方。 当您为各种旧浏览器抛出渲染问题时（这里的“错误”中发现FF令人惊讶），这只会增加混乱。
希望这有助于解释您可能发生的事情，以及为什么您无法正确呈现它。
解决方案2
0 2013-07-06 09:27:43
解决它： http ： //jsfiddle.net/WvJxR/5/
你必须给div一个相对位置来隐藏。
像这样的东西：
#one b {
position: relative;
right: -5em;
top: 4em;
width: 20em;
z-index: -404;
}
IE 10中的Z索引
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.