Html H2文本卡在后面，未清除DIV彩色框
我在一个客户网站上工作，试图让H2字体不在我用来创建的div后面，也不在图像后面的橙色框后面。我对发生这种情况有相当好的理解，但似乎无法找到解决办法。感谢您的帮助Html H2文本卡在后面，未清除DIV彩色框,html,css,Html,Css,我在一个客户网站上工作，试图让H2字体不在我用来创建的div后面，也不在图像后面的橙色框后面。我对发生这种情况有相当好的理解，但似乎无法找到解决办法。感谢您的帮助 <div id="srleft"> <div class="orangebox"><img src="images/quality.png" alt="quality service in portland and vancouver" /&
<div id="srleft">
<div class="orangebox"><img src="images/quality.png" alt="quality service in portland and vancouver" /></div>
<h2>Quality</h2>
<p>With Over ---- Years of combined experience we promise great quality on all window installations.</p>
</div>
如果div
位置：绝对，似乎没有必要使用.orangebox{position:absolute；}
？然后确保你的文本不会出现在那个div前面，所以我建议用div制作表格而不是背景，并将其设置为绝对值。最好删除位置：绝对或遵循此代码生成表，我希望这将起作用
举个例子
HTML页面
背景色前的文本
如果删除位置：绝对因为由于只有此代码，它将隐藏这些内容，使您看起来像只图像。您可以提供小提琴示例吗？似乎已解决了删除该示例的主要问题。我承认我复制粘贴了代码。我已经使用css有一段时间了，但它似乎总是对我做一些棘手的事情。谢谢你的反馈。
#srleft {
position: relative;
float: left;
}
.orangebox {
height: 88px;
width: 89px;
border: 1px solid rgb(74, 74, 74);
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background-color: rgb(240, 111, 38);
border-radius: 0px;
box-shadow: rgba(0, 0, 0, 0.6) 0px 1px 4px 0px;
display: block;
}
.orangebox img {
display: block;
position: absolute;
top: 0; bottom:0; left: 0; right:0;
margin: auto;
}
<!DOCTYPE html>
<html>
<title>HTML page</title>
<body>
<BODY BGCOLOR="Black">
<table width="750px" border="-100" height="230px">
<tr>
<td colspan="3" style="background-color:orange;opacity:0.7;border-radius:20px;">
<h2>TEXT IN FRONT OF BACKGROUND COLOUR</h2>
</td>
</tr>
</table>
</body>
</html>