css - 在 Z-Index Div 问题下显示 Div

Question

所以我只是胡思乱想，想到了在屏幕上重叠三个 W 的好主意。那部分工作正常。我想做的是在其下方显示一行或两行文本。无论出于何种原因，我无法弄清楚如何让文本显示在 WWW 下方，文本的 div 出现在其上方。

这是我的样式表...

body {
background-color:#000000;
color:#ffff00;
font-size:10pt;
font-family:arial;
}

#WWWHolder {
width:800px;
margin-left:auto;
margin-right:auto;
margin-top:100px;
display:block;
}

.w {
font-size:400px;
font-family:times;
color:#f8f8f8;
position:absolute;
}

#w1 {
z-index:2;
text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

#w2 {
z-index:1;
font-size:350px;
margin-left:225px;
margin-top:50px;
color:#d8d8d8;
text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

#w3 {
z-index:2;
margin-left:395px;
text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}


.YReg {
color:#ffff00;
font-size:10pt;
font-family:arial;
}

.WReg {
color:#ffffff;
font-size:10pt;
font-family:arial;
}

这是我的 HTML 代码...

<div id="WWWHolder">
<div id="w1" class="w" title="Winslow">W</div>
<div id="w2" class="w" title="Web">W</div>
<div id="w3" class="w" title="Works">W</div>
</div>

<div class="YReg" style="text-align:center;">
Some Text Goes Here.
</div>

我敢肯定，对于你们中的一些 CSS 专家来说，这一定是一件简单易行的事情。

Answer 1

使元素绝对定位会使它脱离文档流，因此如果您检查 #WWWHolder，您会发现它的高度为 0。

解决问题，使#WWWHolder和#w1position:relative;，并给出#w2 和 #w3 样式 top:0; left:0;，那么它应该可以正常工作。

参见:http://jsfiddle.net/kelervin/WKm3M/