Z-Indexed Divs下面的Diplay Div问题

Question

所以我只是乱搞，并有这个绝妙的想法重叠屏幕上的三个Ws。这部分工作正常。然后我想要做的是在下面显示一行或两行文字。无论出于何种原因，我无法弄清楚如何让文本显示在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/

Answer 2

主要思路使用相对/绝对位置，http://jsbin.com/uhagef/2/edit但仍然有很多优雅的方式做到这一点，以及仅适用于Chrome测试

Answer 3

你只需要你的文字往下推不是你的三个Ws的相等或更大的值：

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