HTML + CSS - 重叠标题图像

Question

我以前在一些网站上看到过类似于下图的布局，我非常喜欢这种设计，但不知道如何实现重叠图像(个人资料图像)。如果有帮助，我正在使用 Bootstrap 。有任何想法吗？ 谢谢!

Answer 1

我一般可以看到三种方法。

position:absolute

您可以为图像或图像的包装器赋予 position:absolute 属性，并为其容器(在您的示例中为绿色框)赋予 position:relative。然后，您将应用 top: -100px 或其他内容，以及 left: 100px 或其他内容的 left 属性。这给出了图像流出的效果，向左对齐并偏移 100px，并从绿色容器的顶部偏移 100px。这种方法的缺点是绿色容器中的任何正文内容都可能出现在图像下方。

position:relative

除了图像在文档中的流动方式之外，这与第一种方法相同。不是给图像position:absolute，而是给它position:relative。相对与绝对不同。它不是父容器的 x 和 y 坐标，它只是移动了您为 top 和 left 提供的值。所以在这种情况下，您将应用 top:-100px 并将其他方向值保留为默认值。这会将您的元素移动该数量，但也会在文档流中保留其原始位置。因此，您最终会在图像下方留下一个空隙，其他内容将在周围流动。

负边距

老实说，我更喜欢这种方法。在这种方法中，您可以给图像一个负边距(例如 margin-top:-100px)。这将偏移图像，折叠图像下方的区域，并且它仍将保留其在文档中的一些流动。这意味着绿色容器的内容将围绕图像流动，但仅围绕仍在容器内的部分流动。它不会像相对定位那样有一个内容四处流动的幻影区域，但它也不会像绝对定位那样完全使图像脱离流动。但是，要记住的一件事是，如果您尝试使用初始值以外的任何类型的 overflow，都会对您的图像造成不良影响。

演示

这是一个快速的小演示，在一个简单的用例中演示了所有三种方法:http://jsfiddle.net/jmarikle/2w4wqfxs/1