HTML + CSS - 重叠标题图像

Question

我之前看到的布局类似于下面某些网站上使用的图像，我非常喜欢这个设计，但我并不完全知道如何实现重叠图像（Profile Image）。如果有帮助，我正在使用bootstrap。有任何想法吗？ 谢谢！

Answer 1

我通常可以看到三种方法。

位置：绝对

您可以为图片或图片的包装器提供position:absolute的属性并为其容器（在您的示例中为绿色框）position:relative。然后你会应用top: -100px或者left: 100px或者其他的左边属性。这样可以使图像不流动，与左边对齐并偏移100px，并从绿色容器顶部偏移100px。这种方法的缺点是绿色容器中的任何物体内容都可能出现在图像下面。

职位：亲属

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

负边际

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

演示

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

Answer 2

可以使用position: absolute; top: 20px; left: 20px设置个人资料图片，或类似的内容，以避免占用页面流中的空间。

Answer 3

制作包含标题图片的“html”元素“position：relative”。然后将标题图像和配置文件图像放在该元素中。然后将轮廓图像设置为“position：absolute”并使用“top：XXpx”，具体取决于您从头部元素顶部的距离。 “左”也一样。

see fiddle here

<div class="header">
    <img src="" alt="my image" class="floatdown">
    this is my header, image could go here too
</div>

<div class="body">
    this is my body content
</div>


.header {

    position: relative;
    width: 100%;
    height: 150px;
    border: 2px solid #000;
    text-align: right;
}

.body {

    position: relative;
    width: 100%;
    border: 2px solid #000;
    height: 500px;
    text-align: right;
}

img {
    width: 90px;
    height: 90px;
    border: 2px solid #ddd;
}

.floatdown {
    position: absolute;
    top: 100px;
    left: 20px;
}

Answer 4

您可以使用个人资料图片中的float属性将其从＆＃34;流＆＃34;对文档进行操作，并使用边距进行正确放置。

CSS：

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

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

您可以在小提琴中看到这样的示例：http://jsfiddle.net/y706d77a/

我不建议使用position: absolute因为您可以使用不同的分辨率获得非常奇怪的结果。我只会用它作为最后的手段。

Answer 5

这可以通过多种方式完成。

只要您在网络上看到类似的内容，您就可以使用检查员或萤火虫，看看他们是如何做到的，以获得一些想法。

在网上做一些关于CSS定位的研究并没有什么坏处。

http://www.w3schools.com/css/css_positioning.asp

另一个很棒的网站。

http://css-tricks.com/

Answer 6

我刚刚完成它。

这是一个codepen链接： http://codepen.io/anon/pen/zxYrxE

HTML：

<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>

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

Answer 7

将个人资料图片放入标题中，制作position: absolute;和图片position: relative;，并为其指定负值bottom，该值为图片高度的一半，并设置{{ 1}}将它水平放置以品尝。

HTML

left

CSS

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

<div>Content</div>

http://jsfiddle.net/dekqn84c/