[英]Text over top of border of div below
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. 我想在div的顶部显示文本,该div的边框也具有白色背景,因此您不会看到边框线穿过文本。 I've tried adding z-index to the text but I believe since
position: relative
it doesn't matter. 我曾尝试在文本中添加z-index,但我相信自
position: relative
以来position: relative
无关紧要。 I'm also open to other suggestions as to how to accomplish and would prefer not to use a fieldset
and legend
. 对于如何完成工作,我也乐于接受其他建议,并且不希望使用
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>
You have the right idea about setting a z-index
. 您对设置
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
. 但是,请注意,要应用
z-index
,您需要指定position
属性,而不是默认的static
。 That will have your #why
element sit on top. 那将使您的
#why
元素位于顶部。 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. 从这里开始,只需给它一个固定的
width
(以及margin: 0 auto
对齐为margin: 0 auto
),以便显示边框的其余部分。
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! 请注意,
width
属性仅表示显示了多少边框-可以随意适应! If you want it to perfectly wrap around the text, I'd recommend using a <span>
tag instead of a <div>
. 如果希望它完美环绕文本,建议使用
<span>
标记而不是<div>
。
Actually, you don't need to use absolute or z index something. 实际上,您不需要使用绝对索引或z索引。
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%. div#why是块状的,您不希望使其成为块状,而是使其成为内联块状,这样它会消耗其正常宽度,而不是100%。
The problem now is how you can center the div#why, i used position:relative, and transformX. 现在的问题是如何使div#居中,为什么我使用了position:relative和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>
You must use a position attribute for z-index to work. 您必须使用position属性,z-index才能起作用。 And you can use a span element to set the background of the text.
您可以使用span元素设置文本的背景。 The span is an inline element ulike div, and will change its width depending on the content.
跨度是类似于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>
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.