我正在一个客户网站上工作，并试图让 H2 字体不要位于我用来创建的 div 后面，以及图像后面的橙色框。我对发生这种情况有相当不错的了解，但似乎无法找到解决方案。
#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;
}<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>好像没必要用
.orangebox {position: absolute;}如果您删除
position: absolute;如果 div
position: absolute;position: absolute;<!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>
尝试添加“位置：相对；”到你的 h2 文本。