Text over top of border of div below - html

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>