使用HTML在Outlook中无法实现图片重叠问题求助

我在使用Power Automate制作生日邮件模板时，希望通过HTML实现图片的动态重叠布局，但运行流发送邮件后，图片并未按预期重叠展示。以下是我使用的原HTML代码：

<!DOCTYPE html>
<html>

<head>
  <style>
    .template {
      position: relative;
      width: 800px;
      height: 600px;
      font-family: Arial, sans-serif;
    }

    .background {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
    }

    .profile-photo {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      z-index: 2;
    }

    .main-photo {
      position: absolute;
      z-index: 1;
    }

    .photo1 {
      top: 150px;
      left: 50px;
      width: 200px;
      height: 300px;
    }

    .photo2 {
      top: 150px;
      left: 300px;
      width: 200px;
      height: 300px;
    }

    .photo3 {
      top: 150px;
      left: 550px;
      width: 200px;
      height: 300px;
    }

    .title {
      position: absolute;
      top: 50px;
      left: 50px;
      font-size: 36px;
      font-weight: bold;
      color: white;
      z-index: 2;
    }
  </style>
</head>

<body>
  <div class="template">
    <!-- Background -->
    <img class="background" src="cid:background" alt="Background">

    <!-- Title -->
    <div class="title">Happy Birthday</div>

    <!-- Profile Photo -->
    <img class="profile-photo" src="cid:profile" alt="Profile Photo">

    <!-- Main Photos -->
    <img class="main-photo photo1" src="cid:photo1" alt="Photo 1">
    <img class="main-photo photo2" src="cid:photo2" alt="Photo 2">
    <img class="main-photo photo3" src="cid:photo3" alt="Photo 3">
  </div>
</body>

</html>

问题根源 #

邮件客户端（如Outlook、Gmail）对现代CSS的支持远不如浏览器，position: absolute和z-index这类属性经常被忽略或解析异常，导致重叠布局失效。此外，cid:图片引用的配置错误也会导致图片加载异常，干扰布局效果。

修复方案 #

1. 改用表格布局（邮件兼容最优解） #

表格是邮件布局的标准方案，几乎所有邮件客户端都能完美支持。以下是重构后的代码，通过嵌套表格实现图片层级：

<!DOCTYPE html>
<html>
<head>
    <style>
        table {border-collapse: collapse;}
        .title-text {font-family: Arial, sans-serif; font-size: 36px; font-weight: bold; color: white;}
        .profile-img {border-radius: 50%; width: 100px; height: 100px;}
        .main-img {width: 200px; height: 300px;}
    </style>
</head>
<body>
    <!-- 外层容器表格，作为背景层 -->
    <table width="800" height="600" cellpadding="0" cellspacing="0">
        <tr>
            <td background="cid:background" style="width: 800px; height: 600px;">
                <!-- 上层内容表格，覆盖背景 -->
                <table width="100%" height="100%" cellpadding="0" cellspacing="0">
                    <tr>
                        <!-- 标题 -->
                        <td colspan="3" style="padding: 50px 0 0 50px; text-align: left;">
                            <span class="title-text">Happy Birthday</span>
                        </td>
                        <!-- 头像 -->
                        <td style="padding: 20px 20px 0 0; text-align: right;">
                            <img class="profile-img" src="cid:profile" alt="Profile Photo">
                        </td>
                    </tr>
                    <tr>
                        <!-- 主图片1 -->
                        <td style="padding: 150px 0 0 50px;">
                            <img class="main-img" src="cid:photo1" alt="Photo 1">
                        </td>
                        <!-- 主图片2 -->
                        <td style="padding: 150px 0 0 50px;">
                            <img class="main-img" src="cid:photo2" alt="Photo 2">
                        </td>
                        <!-- 主图片3 -->
                        <td style="padding: 150px 0 0 50px;">
                            <img class="main-img" src="cid:photo3" alt="Photo 3">
                        </td>
                        <td></td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

2. 优化CSS兼容性（保留定位方案） #

如果坚持使用CSS定位，需添加邮件客户端专属前缀，增强兼容性：

<!DOCTYPE html>
<html>
<head>
    <style>
        .template {
            position: relative;
            width: 800px;
            height: 600px;
            font-family: Arial, sans-serif;
            /* 针对Outlook添加VML支持 */
            mso-positioning: relative;
        }
        .background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            mso-positioning: absolute;
        }
        .profile-photo {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            z-index: 2;
            mso-positioning: absolute;
        }
        .main-photo {
            position: absolute;
            z-index: 1;
            mso-positioning: absolute;
        }
        .photo1 {top: 150px; left: 50px; width: 200px; height: 300px;}
        .photo2 {top: 150px; left: 300px; width: 200px; height: 300px;}
        .photo3 {top: 150px; left: 550px; width: 200px; height: 300px;}
        .title {
            position: absolute;
            top: 50px;
            left: 50px;
            font-size: 36px;
            font-weight: bold;
            color: white;
            z-index: 2;
            mso-positioning: absolute;
        }
    </style>
</head>
<body>
    <div class="template">
        <img class="background" src="cid:background" alt="Background">
        <div class="title">Happy Birthday</div>
        <img class="profile-photo" src="cid:profile" alt="Profile Photo">
        <img class="main-photo photo1" src="cid:photo1" alt="Photo 1">
        <img class="main-photo photo2" src="cid:photo2" alt="Photo 2">
        <img class="main-photo photo3" src="cid:photo3" alt="Photo 3">
    </div>
</body>
</html>

3. 验证图片Content ID配置 #

在Power Automate的"发送邮件"动作中：

• 上传图片时，勾选嵌入到邮件中
• 每张图片的Content ID必须和HTML中cid:后的名称完全匹配（比如cid:background对应Content ID为background，大小写敏感）

内容的提问来源于stack exchange，提问作者Alastair