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：围绕重叠文本的共同边框

回答

相关问题