容器重叠 header 图片

Question

我使用 bootstrap 从头开始构建网站，并且有一个关于 containers/positioning 的问题。

我将构建一个容器与 header 图像重叠的部分（附上屏幕截图示例）。我想知道是否有人有使用此方法的示例或知道该技术的名称以便我查看其他示例？

方法是使用绝对定位，但在我自己做之前，我只想看看其他人尝试的例子！

感谢您的帮助。

Answer 1

我以前试过这样做，我用 z-index: -1 作为图像。

Answer 2

我认为我们需要查看您的 html 的结构以了解它的形成方式并相应地应用 css 规则。但如果你没有，这里有一个使用负边距的例子：

.first {
  background-color: lightgreen;
  width: 100%;
  height: 200px;
  z-index: 1;
}

.second {
  background-color: blue;
  width: 60%;
  height: 200px;
  margin-left: auto;
  margin-right: auto;
  margin-top: -80px;
  z-index: 2;
}

<div class="first"></div>
<div class="second"></div>

容器重叠 header 图片

Container overlapping header image

html

containers

css-position

bootstrap-4