将图像定位在电子邮件模板中的另一个图像之上答案

【问题标题】：Positioning an image above another image in an email template将图像定位在电子邮件模板中的另一个图像之上
【发布时间】：2015-08-15 20:24:52
【问题描述】：

如何在任何电子邮件模板中定位元素。在设计中，我必须将图像放在另一个图像上，这只能通过绝对定位或给它一个边距来实现。据我所知，谷歌不支持任何元素的边距和定位样式。有没有其他方法可以解决这个问题..

目前看起来是这样的

预期输出

【问题讨论】：

标签： html css email email-templates

【解决方案1】：

最常用的电子邮件客户端不支持position css 属性。 Reference.

我可以向你推荐两个选项。

将较大的图像作为父元素的背景，并将另一个图像放在子元素<img> 标记中。并使用父元素和子元素的width、height 和float 属性。
```
<div style="background: url(...);">
    <img src="..."/>
</div>
```
或者，如果所有电子邮件的这些图像都相同，则创建一个组合这两个图像的合成图像。

【讨论】：

【解决方案2】：

封面照片使用background-image，用户照片使用img，然后将img放在封面照片内，并在img上方加上div。

工作示例 http://codepen.io/anon/pen/oXZXmp

css

.container {
  background: red;
  margin: auto;
  width: 600px;
  height: 300px;
  background: #ddd;
}
header {
  padding: 20px;
  height: 140px;
  background: url(https://static.pexels.com/photos/489/dawn-nature-sunset-night.jpg) center top;
  background-size: cover;
}
.thumbnail {
  width: 100px;
  height: 100px;
  background: #fff;
  border: none;
}
.offset {
  width: 100%;
  height: 100px;
}

html

<div class="container">
  <header>
    <div class="offset"></div>
    <img src="http://api.adorable.io/avatars/100/abott@adorable.io.png" class="thumbnail" alt="user photo">
  </header>
</div>

【讨论】：