容器重叠标题图像[关闭]答案

【问题标题】：Container overlapping header image [closed]容器重叠标题图像[关闭]
【发布时间】：2021-06-07 08:18:23
【问题描述】：

我使用引导程序从头开始构建网站，并且对容器/定位有疑问。

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

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

感谢您的所有帮助。

【问题讨论】：

标签： html bootstrap-4 containers css-position

【解决方案1】：

我认为我们需要查看您的 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>

【讨论】：

嗨，阿德里安娜。当然，如果没有看到我的 HTML，我不会期望一个完美的工作示例。在您看来，负边距比绝对定位更好吗？
@NathanClancy 是的，在我看来，我总是尽量避免绝对定位，因为如果你不是很小心，元素可能会在不同的设备分辨率下不合适。过去在我身上发生过很多次
@NathanClancy 我的意思是如果你愿意，你可以使用绝对位置，它没有问题，因为它是完全支持的，这只是我的意见。我要说的是，如果您不了解细节或不确定如何使用它，“位置：绝对”可能会产生副作用;-)
感谢您的建议！ ? 我刚刚使用负边距进行了测试，你是对的，它比绝对定位更容易控制。再次感谢！

【解决方案2】：

我之前尝试过这样做，并且我使用z-index: -1 作为图像。

【讨论】：