Css 在Z索引Div下显示Div问题

所以我只是在胡闹，有一个很好的主意，在屏幕上重叠三个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>

W
W
W
这里有一些文字。

---

我敢肯定，对于你们中的一些CSS专家来说，这一定是一个简单的无脑游戏

使元素绝对定位会使其脱离文档流，因此如果检查

#wwholder

，您会发现它的高度为0

要解决此问题，请使

#wwholder

和

#w1

位置：相对

，并给出

#w2

和

#w3

样式

top:0；左：0，那么它应该可以正常工作

请参阅：
使元素绝对定位会使其脱离文档流，因此如果检查
#wwholder
，您会发现它的高度为0

要解决此问题，请使
#wwholder
和
#w1
位置：相对
，并给出
#w2
和
#w3
样式
top:0；左：0，那么它应该可以正常工作

请参阅：
主要思想使用相对/绝对位置，但是有很多优雅的方法可以做到这一点，而且只有在chrome中经过了很好的测试主要思想使用相对/绝对位置，但是有很多优雅的方法可以做到这一点，正如仅在chrome中经过良好测试一样，您只需将文本向下推至等于或大于三个Ws的值：

.YReg {
   position: relative;
   top: 400px;
}

您只需将文本向下推至等于或大于三个Ws的值：

.YReg {
   position: relative;
   top: 400px;
}

虽然这是正确的，但使用
position:relative
的原因是允许浏览器根据
W
s的大小自动执行此操作-根据用户的浏览器、操作系统等可以（并且经常会）改变。虽然这是正确的，使用
position:relative
的原因是允许浏览器根据
W
s的大小自动执行此操作-根据用户的浏览器、操作系统等的不同，其大小可能会（并且经常会）发生变化。