對齊問題 - z-index的問題

對，我有一個標題和一個小格.sideShadow，我需要.shideShadow div來要落後#sideTopHeader格，現在它是在頂部它，你可以在這裏（在你的右邊），看看它對齊問題 - z-index的問題

CSS我現在用

#sideTopHeader { 
background: #333333; 
z-index: 1; 
position: relative; 
height: 50px; 
margin: 0 -30px 0 0; 

-webkit-border-radius: 7px 7px 0 7px; 
-khtml-border-radius: 7px 7px 0 7px; 
-moz-border-radius: 7px 7px 0 7px; 
border-radius: 7px 7px 0 7px; 
} 

.sideShadow { 
border-color: transparent transparent transparent #1f1f1f; 
border-width: 15px; 
border-style: solid; 
height: 0; 
width: 0; 
position: absolute; 
top: 35px; 
left: 395px; 
z-index: 0; 
}

來源

2011-08-28 Ilja

工作不改變的標記：不使用z-index上#sideTopHeader（順便說一句：這是爲什麼一個ID是否真的只有邊欄裏面一個元素？），並設置z-index到-1爲.sideShadow。

但我真的建議，你最好清理你的標記。您並不需要三個嵌套DIV來設計單個內容元素。例如，您可以使用pseduo元素來代替嵌套的div.sideShadow，以便用於CSS效果，例如#sideTopHeader:after。

來源

2011-08-28 12:29:34 feeela

你能解釋一下這個僞元素是什麼？我第一次瞭解它 – Ilja

請注意，僞選擇器在IE7中不起作用，並且在IE8中不可靠。 – kinakuta

@kinakuta這就是爲什麼我最好鏈接到sitepoint.com參考： http://reference.sitepoint.com/css/pseudoelement-after#compatibilitysection ;-) – feeela

@llya;把你的.slidershow DIV你之外，而不是#sideTopHeader DIV中這樣

HTML：

<div id="sideTopHeader"></div> 
<div class="sideShadow"></div>

& position relative到它的父。可能是對你

來源

2011-08-28 12:26:23 sandeep

是的，這將工作。 – kinakuta

對齊問題 - z-index的問題

回答

相關問題