在HTML5中，有时我们需要确保文本内容不被图片覆盖，为了实现这个目的，我们可以采用一些方法来调整图片和文本的层叠顺序，本文将介绍几种设置方法，以确保图片不会覆盖文本内容。
1、使用<figure>和<figcaption>标签
HTML5引入了<figure>和<figcaption>标签，这两个标签可以很好地组织图片和相关的标题或描述，通过使用这些标签，浏览器会自动将图片和文本进行正确的层叠，避免图片覆盖文本。
示例代码：
<figure> <img src="image.jpg" alt="描述图片内容"> <figcaption>图片描述文本。</figcaption> </figure>
2、使用CSS的position属性
通过CSS的position属性，我们可以控制图片和文本的位置，将图片设置为绝对定位（position: absolute;）或相对定位（position: relative;），并为文本设置合适的z-index值，可以确保文本不被图片覆盖。
示例代码：
<style>
.text {
position: relative;
z-index: 1;
}
.image {
position: absolute;
top: 20px;
left: 20px;
z-index: 0;
}
</style>
<div class="text">文本内容不会被图片覆盖。</div>
<img class="image" src="image.jpg" alt="描述图片内容">
3、使用CSS的float属性
通过使用CSS的float属性，我们可以将图片浮动在文本的左侧或右侧，这样，文本将环绕图片排列，不会被图片覆盖。
示例代码：
<style>
img {
float: left;
margin-right: 10px;
}
</style>
<img src="image.jpg" alt="描述图片内容">文本内容环绕图片排列，不会被覆盖。
常见问题与解答：
Q1: 如何使用HTML5的语义化标签来避免图片覆盖文本？
A1: 可以使用<figure>和<figcaption>标签，它们可以帮助你组织图片和相关的标题或描述，从而避免图片覆盖文本。
Q2: 使用CSS如何解决图片覆盖文本的问题？
A2: 可以通过设置position属性（如position: absolute;或position: relative;）和调整z-index值来控制图片和文本的层叠顺序，还可以使用float属性让文本环绕图片排列。
Q3: 浮动图片是否会影响文本的布局？
A3: 浮动图片会让文本环绕图片排列，从而避免覆盖，但请注意，浮动图片可能会导致布局上的一些问题，如父元素高度塌陷，在这种情况下，可以使用CSS的clear属性或为父元素设置overflow属性来解决。