html让盒子不被背景图盒子挡住

在HTML和CSS中，如果你想要一个元素的内容不会被其背景图片覆盖，你可以使用`position`属性结合`z-index`来控制元素的堆叠顺序。以下是几种常见方法：

1. **相对定位** (relative): 将元素设置为`position: relative;`，然后将内容的子元素设置为`position: absolute;`。通过调整`top`, `right`, `bottom`, 和 `left` 属性，你可以精确地定位内容。

   <div class="container" style="position:relative;">
     <div class="content" style="position:absolute;"></div>
   </div>

2. **绝对定位** (absolute): 如果容器是固定的、非滚动的，可以将背景和内容都设置为`position: absolute;`，并分别指定`top`, `left` 来控制它们的位置。

   <div class="background" style="position:absolute;"></div>
   <div class="content" style="position:absolute;"></div>

3. **负margin** 或者 `padding-bottom`: 对于块级元素，有时也可以通过给背景元素添加负`margin-bottom`或增大底部`padding`来创造间距，避免内容被遮挡。

   .container {
     position: relative;
     padding-bottom: calc(100% + background-image-height); /* 假设你知道背景图的高度 */
   }

4. **使用伪元素** (`::before` or `::after`) 创建一个透明层，将内容放在它上面：

   .container::before {
     content: "";
     display: block;
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: -1; /* 确保内容显示在上方 */
   }