对齐问题 - 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的问题

回答

相关问题