HTML/CSS：圍繞重疊文本的共同邊框

enter image description here

當我們有這樣的：
enter image description here

爲

<html> 
    <head> 
     <style>    
      h2 
      { 
       letter-spacing:4pt; 
       font-size:40pt; 
       color:blue; 
       text-align:center; 
       position:absolute; 
       top:0px; 
      } 
      h3 
      { 
       letter-spacing:4pt; 
       font-size:40pt; 
       color:blue; 
       text-align:center; 
       position: absolute; 
       top:20px; 
       left:20px; 
      } 
     </style> 
    </head> 

    <body> 
     <h2>All right, Mate?</h2> 
     <h3>All right, Mate?</h3> 
    </body> 
</html> 
</html>

...不改變原有功能/標籤。
只添加（或修改）一點。

來源

2012-05-22 pop stack

我更新了我的答案:-) – Neal

您可以將兩者都放在position設置爲relative的包裝中，並將其定義爲固定的width和height。

HTML

<div class="wrapper"> 
    <h2>All righ, Mate?</h2> 
    <h3>All right, Mate?</h3> 
</div>

CSS

.wrapper 
{ 
    border: 3px solid #ff0000; 
    position: relative; 
    width: 448px; 
    height: 89px; 
}  
h2 
{ 
    letter-spacing:4pt; 
    font-size:40pt; 
    color:blue; 
    text-align:center; 
    position:absolute; 
    top:0px; 
} 
h3 
{ 
    letter-spacing:4pt; 
    font-size:40pt; 
    color:blue; 
    text-align:center; 
    position: absolute; 
    top:20px; 
    left:20px; 
}

因此，有必要定義height，因爲這兩個元素都具有position設置爲absolute，它對從刪除的元素正常的文檔流，所以父元素，在這種情況下，包裝，不會廣告d絕對定位的孩子自己的height。
此外，請注意，定義父母的position至relative將影響孩子的位置，因爲他們的位置將根據父母的位置進行計算。如果您不想要這種行爲，請從.wrapper規則中刪除position: relative。

Live example

希望它能幫助。

來源

2012-05-22 17:52:32 PanterA

嗯...雖然寬度可能更多 –

@popstack是的，我只在Chrome上測試過。在Firefox和IE中，'width'太小了。無論如何，你可以根據自己的意願改變它。 :) – PanterA

將它包裝在一個div中並設置邊框。

試着改變你的HTML這樣的：

<div> 
    <span id="h2">All right, Mate?</span> 
    <span id="h3">All right, Mate?</span> 
</div>

而且你的CSS這樣的：

div { 
    padding : 5px; 
    border: 3px solid red; 
    height: 70px; 
    width: 440px; 
} 
div span { 
    width: 420px; 
    display: block; 
    letter-spacing:4pt; 
    font-size:40pt; 
    color:blue; 
    position: relative; 
} 
div span#h2 
{ 
    top:0px; 
} 
div span#h3 
{ 
    top:-50px; 
    left:20px; 
}

小提琴：http://jsfiddle.net/maniator/PJT9V/

來源

2012-05-22 15:08:34 Neal

沒有工作 –

@popstack一秒鐘，在小提琴上工作。 – Neal

@popstack看到我的更新:-) – Neal

你可以把它們都在一個包裝或者你可以嘗試一個text-shadow解決方案 - 像這樣的東西http://dabblet.com/gist/2769678

來源

2012-05-22 15:14:36 Ana

HTML/CSS：圍繞重疊文本的共同邊框

回答

相關問題