HTML + CSS - 重叠标题图像

Question

我之前看到的布局类似于下面某些网站上使用的图像,我真的很喜欢这个设计,但并不知道如何实现重叠图像(Profile Image).如果有帮助,我正在使用bootstrap.有任何想法吗？ 谢谢!

Answer 1

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

位置：绝对

您可以为图像或图像的包装器指定属性，position:absolute并为其提供容器（在您的示例中为绿色框）position:relative。然后，您将应用top: -100px或任意以及或任意的left属性left: 100px。这会产生图像流出的效果，该图像向左对齐并偏移100像素，与绿色容器的顶部偏移100像素。这种方法的缺点是，绿色容器中的任何内容物都可能出现在图像下方。

职位：相对

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

负利润

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

演示版

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