如何使兩個文本元素直接使用CSS重疊？

比方說，我有：如何使兩個文本元素直接使用CSS重疊？

<div> 
    hello 
    <div>hello</div> 
</div>

我想這兩份案文直接在相同的位置（對齊中心）重疊。哪個重疊哪個並不重要。

是否可以用CSS做到這一點？

我能得到的最接近的是：

<div style="position: relative; margin: 0 auto; text-align: center; width: 0"> 
    hello 
    <div style="position: absolute; text-align: center">hello</div> 
</div>

但是這會導致一個以上（垂直）其他的，而不是居中。

在此先感謝。

來源

2011-08-26 Yang

請注意，有一個['text-shadow'屬性]（http://www.w3.org/TR/2003/CR-css3-text-20030514/#text-shadows） [大多數瀏覽器]（http://caniuse.com/css-textshadow），如果這就是你想要做的。 – thirtydot

@thirtydot：close，其實我試圖將文本陰影應用於某些漸變文本。漸變文本是使用CSS背景圖像剪裁創建的，因此它實際上是背景的一部分，因此我應用於該背景的任何文本 - 陰影都將顯示在背景的頂部。這就是爲什麼我需要將它放在帶有陰影的文本之上的第二個元素的背景。 – Yang

添加top: 0; width: 100%到內部div：

<div style="position: relative; margin: 0 auto; text-align: center"> 
    hello 
    <div style="position: absolute; top: 0; width: 100%">hello</div> 
</div>

我不知道什麼width: 0在做在外div，所以我刪除它。

參見：http://jsfiddle.net/thirtydot/Xprtd/

來源

2011-08-26 09:31:49 thirtydot

添加top:0px;風格，第二個div ...

來源

2011-08-26 09:31:29 Gatekeeper

嘗試給他們平等的寬度，外側 - 寬度：汽車什麼的，內 - 100％。
您還應該考慮left：0; top：0表示絕對定位的div。

來源

2011-08-26 09:32:31 Leonid

第二個div的樣式不關心。

HTML

<div class="styleDiv"> 
    hello 
    <div>hello</div> 
</div>

CSS

.styleDiv { 
    line-height: 4px; /* 0px if you want to overlaps completly */ 
    text-align: center; 
}

然後，調整line-height

來源

2011-08-26 09:37:14

在瀏覽器IE，FF，Chrome的測試...

<div style="background:red;position: relative;text-align:center;width:100%;"> 
    <div style="color:Green;position:relative;">hello 
     <div style="position:absolute;top:0;width:100%;">hello</div> 
    </div> 
</div>

enter image description here

來源

2011-08-26 10:00:38 Somnath

如何使兩個文本元素直接使用CSS重疊？

回答

相關問題