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.