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; 
}