下方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>