Text over top of border of div below

Question

I'd like to have text appear on the top of a div that has a border that also has a white background so you don't see the border line going through the text. I've tried adding z-index to the text but I believe since position: relative it doesn't matter. I'm also open to other suggestions as to how to accomplish and would prefer not to use a fieldset and legend .

Fiddle

 #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

You have the right idea about setting a z-index . However, note that in order for a z-index to apply, you need to specify a position property other than the default of static . That will have your #why element sit on top. From here, it's just a matter of giving it a fixed width (along with margin: 0 auto for alignment) so that the rest of the border gets shown.

This can be seen in the following:

 #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> 

Note that the width property denotes just how much of the border is shown - feel free to adapt to suit! If you want it to perfectly wrap around the text, I'd recommend using a <span> tag instead of a <div> .

Answer 2

Actually, you don't need to use absolute or z index something.

The div#why is block, you dont want to make it block, instead make it inline-block so it consume it's normal width, not 100%.

The problem now is how you can center the div#why, i used position:relative, and transformX.

Cheers!

 #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

You must use a position attribute for z-index to work. And you can use a span element to set the background of the text. The span is an inline element ulike div, and will change its width depending on the content.

 #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

You can simply add some margin

 #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>