下方div边框上方的文字

Question

我想在div的顶部显示文本，该div的边框也具有白色背景，因此您不会看到边框线穿过文本。 我曾尝试在文本中添加z-index，但我相信自position: relative以来position: relative无关紧要。 对于如何完成工作，我也乐于接受其他建议，并且不希望使用fieldset和legend 。

小提琴

 #large-div-text { padding: 20px; border: 1px solid rgba(64, 189, 233, 0.42); position: relative; margin-top: -10px; } #why { background-color: #FFF; text-align: center; z-index: 1000; } 

 <div id="why"> No line behind me, please! </div> <div id="large-div-text"> Large div text </div> 

Answer 1

您对设置z-index有正确的想法。 但是，请注意，要应用z-index ，您需要指定position属性，而不是默认的static 。 那将使您的#why元素位于顶部。 从这里开始，只需给它一个固定的width （以及margin: 0 auto对齐为margin: 0 auto ），以便显示边框的其余部分。

可以在以下内容中看到：

 #large-div-text { padding: 20px; border: 1px solid rgba(64, 189, 233, 0.42); position: relative; margin-top: -10px; } #why { background-color: #FFF; text-align: center; position: relative; z-index: 1000; width: 250px; margin: 0 auto; } 

 <div id="why"> No line behind me, please! </div> <div id="large-div-text"> Large div text </div> 

请注意， width属性仅表示显示了多少边框-可以随意适应！ 如果希望它完美环绕文本，建议使用<span>标记而不是<div> 。

Answer 2

实际上，您不需要使用绝对索引或z索引。

div＃why是块状的，您不希望使其成为块状，而是使其成为内联块状，这样它会消耗其正常宽度，而不是100％。

现在的问题是如何使div＃居中，为什么我使用了position：relative和transformX。

干杯!

 #large-div-text { padding: 20px; border: 1px solid rgba(64,189,233,0.42); position: relative; margin-top: -10px; } #why { background-color: #FFF; text-align: center; z-index: 1000; display: inline-block; transform: translateX(-50%); left: 50%; position: relative; } 

 <div id="why"> No line behind me, please! </div> <div id="large-div-text"> Large div text </div> 

Answer 3

您必须使用position属性，z-index才能起作用。 您可以使用span元素设置文本的背景。 跨度是类似于div的内联元素，并将根据内容更改其宽度。

 #large-div-text { padding: 20px; border: 1px solid rgba(64, 189, 233, 0.42); position: relative; margin-top: -10px; z-index: 0; } #why { text-align: center; z-index: 1000; position: relative; } .whitebg { background-color: white; padding: 0.5em; } 

 <div id="why"> <span class=whitebg>No line behind me, please!</span> </div> <div id="large-div-text"> Large div text </div> 

Answer 4

您可以简单地增加一些边距

 #large-div-text { padding: 20px; border: 1px solid rgba(64, 189, 233, 0.42); position: relative; margin-top: -10px; } #why { background-color: #FFF; text-align: center; z-index: 1000; margin: 10px; } 

 <div id="why"> <span class=whitebg>No line behind me, please!</span> </div> <div id="large-div-text"> Large div text </div>