HTML+；CSS-重叠标题图像

我以前在一些网站上看到过类似于下图的布局，我非常喜欢这个设计，但不知道如何实现重叠图像（配置文件图像）。如果有帮助的话，我正在使用引导。有什么想法吗？

---

谢谢

外形图像可设置为

位置：绝对；顶部：20px；左：20px

，或类似的东西，以防止在页面流中占用空间。

使包含标题图像的html元素“位置：相对”。然后将标题图像和配置文件图像放在该元素中。然后使概要文件图像“position:absolute”并利用“top:XXpx”，这取决于您希望它离header元素顶部的距离。“左”也一样

这是我的标题，图片也可以放在这里
这是我的身体内容
.标题{
位置：相对位置；
宽度：100%；
高度：150像素；
边框：2倍实心#000；
文本对齐：右对齐；
}
.身体{
位置：相对位置；
宽度：100%；
边框：2倍实心#000；
高度：500px；
文本对齐：右对齐；
}
img{
宽度：90px；
高度：90px；
边框：2px实心#ddd；
}
.浮动{
位置：绝对位置；
顶部：100px；
左：20px；
}

您可以使用个人资料图像上的

float

属性将其从文档的“流”中取出，并使用边距将其正确放置

CSS:

#profile-image{
    width: 100px;
    height: 100px;    
    float: left;    
    margin: 100px;
}

边距

用于将其向下推并正确放置

你可以在小提琴上看到这样一个例子：

---

我不建议使用

position:absolute

，因为使用不同的分辨率可以得到非常奇怪的结果。我只会把它作为最后的手段。

这可以通过多种方式实现

只要你在网上看到类似的东西，你就可以使用你的检查员或firebug，看看他们是如何做的，以获得一些想法

在网上做一些关于CSS定位的研究不会有什么坏处

另一个伟大的网站

我刚做完

这是一个代码笔链接：

HTML:

这是标题div

侧面图

一些虚拟内容div

---

CSS要粘贴在这里太大了，所以只需打开链接。

将配置文件图像放在标题中，使

位置：绝对和图像
位置：相对，并给它一个负的
底部
值，该值是图像高度的一半，然后设置
左侧
使其水平放置，以便品尝

HTML

一般来说，我可以看到三种方法

位置：绝对位置
您可以为图像或图像的包装赋予
位置：绝对
属性，并赋予其容器（在您的示例中为绿色框）
位置：相对
。然后您将应用
top:-100px
或任何内容，并应用
left:100px
或任何内容的left属性。这会产生图像不流动、向左对齐并偏移100px以及从绿色容器顶部偏移100px的效果。这种方法的缺点是，绿色容器中的任何正文内容都可能出现在图像下

职位：相对
这与第一种方法相同，只是图像在文档中的流动方式不同。您不需要给出图像的
位置：绝对
，而应该给出图像的
位置：相对
。相对与绝对的工作方式不同。它不是父容器的x和y坐标，而是根据您为
top
和
left
提供的值进行移动。因此，在本例中，您将应用
top:-100px
，并将其他方向值保留为默认值。这将使元素移动该数量，但也会保留其在文档流中的原始位置。因此，在图像下方会有一个间隙，其他内容将围绕该间隙流动

负边际
老实说，我更喜欢这种方法。在此方法中，您可以为图像提供负边距（例如，
边距顶部：-100px
）。这将偏移图像，折叠图像下方的区域，并且仍将在文档中保留部分流。这意味着绿色容器的内容将围绕图像流动，但仅围绕仍在容器内的部分流动。它不会像相对定位那样有一个内容流动的鬼影区域，但它也不会像绝对定位那样完全将图像从流动中移除。但是，需要记住的一点是，如果尝试使用初始值以外的任何类型的
溢出
，将对图像造成不良影响

演示
这里有一个快速的小演示，在一个简单的用例中演示了所有三种方法：
您可以使用绝对位置定位您的个人资料图像，甚至可以在其他两个容器上方显示一个单独的z索引，我并不真的想使用绝对定位，所以我认为负边距是一种方式，谢谢。
#profile-image{
    width: 100px;
    height: 100px;    
    float: left;    
    margin: 100px;
}

<div class="main-container">
  <div class="header">
    <p>This is the header div</p>
  </div>
  <div class="profile">
    <p>Profile</p>
  </div>
  <div class="content">
    <p>Some dummy content div</p>
  </div>
</div>

<header>
    <img class="profile">
</header>

<div>Content</div>

header, div{
    min-height: 110px;
    background: darkgray;
}
header{
    position: relative;
    background: gray;
}
img{
    position: absolute;
    bottom: -50px;
    left: 100px;
}