1

所以我只是在胡闹，想出了一个在屏幕上重叠三个 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 专家来说，这一定很容易。

4

3 回答 3

1

使元素绝对定位会将其从文档流中移除，因此如果您检查#WWWHolder，您会发现它的高度为 0。

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

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

于 2012-11-09T01:03:14.803 回答
0

主要思想使用相对/绝对位置，http://jsbin.com/uhagef/2/edit但有很多优雅的方法可以做到这一点，并且仅在 chrome 中进行了测试

于 2012-11-09T01:12:49.500 回答
0

您只需要将文本下推到等于或大于您的三个 W 的值：

.YReg {
   position: relative;
   top: 400px;
}
于 2012-11-09T01:36:29.683 回答