如何在Outlook的HTML邮件中实现堆叠式元素定位？

要在Outlook（尤其是Windows桌面版）实现你需要的堆叠布局，核心要解决Outlook的渲染限制：它使用Word引擎，不支持position:absolute、transform，跨行的负margin也不生效，且不支持CSS圆角。以下是兼顾所有客户端的完整代码：

<table role="none" width="100%" align="center" style="background-color: #F1F4F6; font-family:Lato,Trebuchet MS, sans-serif; max-width:600px;" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td align="center" style="background-color: #F1F4F6; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 0;">
        <!-- 非Outlook客户端使用绝对定位布局 -->
        <!--[if !mso]><!-->
        <div style="position: relative; width: 100%; max-width: 600px; margin: 0 auto;">
          <div align="center" style="background-color: #0073C4; height: 566px; width:458px; border-radius: 5px; position: relative; margin: 0 auto;">
            <p style="padding-top: 150px; color: white;"> Container 1</p>
          </div>
          <div align="center" style="background-color: #2F0FFF; height: 171px; width:164px; border-radius: 5px; position: absolute; top: -85px; left: 50%; transform: translateX(-50%);">
            <p style="color: white;">Image</p>
          </div>
          <div align="center" style="background-color: #8FFFFF; height: 285px; width:512px; border-radius: 5px; position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);">
            <p>Container 2</p>
          </div>
        </div>
        <!--<![endif]-->

        <!-- Outlook客户端专属布局：嵌套表格+负Margin+VML圆角 -->
        <!--[if mso]>
        <table role="none" width="600" align="center" cellpadding="0" cellspacing="0">
          <tr>
            <td align="center" style="padding: 0;">
              <!-- 蓝色容器Container1 -->
              <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="" style="height:566px; width:458px; v-text-anchor:middle;" arcsize="3%" fillcolor="#0073C4" stroke="f">
                <w:anchorlock/>
                <center style="color:#ffffff; font-family:Lato, Helvetica, Arial, sans-serif; font-size:16px; font-weight:400; line-height:24px; padding-top:150px;">Container 1</center>
              </v:roundrect>

              <!-- 紫色容器Image -->
              <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="" style="height:171px; width:164px; v-text-anchor:middle; Margin-top:-481px;" arcsize="3%" fillcolor="#2F0FFF" stroke="f">
                <w:anchorlock/>
                <center style="color:#ffffff; font-family:Lato, Helvetica, Arial, sans-serif; font-size:16px; font-weight:400; line-height:24px;">Image</center>
              </v:roundrect>

              <!-- 浅蓝色容器Container2 -->
              <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="" style="height:285px; width:512px; v-text-anchor:middle; Margin-top:-295px;" arcsize="3%" fillcolor="#8FFFFF" stroke="f">
                <w:anchorlock/>
                <center style="color:#000000; font-family:Lato, Helvetica, Arial, sans-serif; font-size:16px; font-weight:400; line-height:24px;">Container 2</center>
              </v:roundrect>
            </td>
          </tr>
        </table>
        <![endif]-->
      </td>
    </tr>
  </tbody>
</table>

关键适配点说明 #

1. 条件注释隔离代码：

   • <!--[if !mso]><!-->...<!--<![endif]-->：包裹非Outlook的绝对定位代码，Outlook会自动忽略这部分。
   • <!--[if mso]>...<![endif]-->：包裹Outlook专属代码，其他客户端会自动忽略。

2. Outlook布局核心：

   • 所有容器放在同一个<td>内，使用负Margin-top（大写M，Outlook专属语法）调整堆叠位置：
     • 紫色容器Margin-top:-481px：计算逻辑为蓝色容器高度566px - 紫色容器半高85px = 481px，确保紫色容器垂直居中在蓝色容器顶部。
     • 浅蓝色容器Margin-top:-295px：匹配原布局中bottom:10px的效果，可根据实际显示微调数值。
   • 使用VML的<v:roundrect>实现圆角：Outlook不支持CSSborder-radius，VML是唯一可靠的圆角方案。

3. 跨客户端兼容：

   • 非Outlook客户端保留你原来的绝对定位+transform布局，确保正常显示。
   • 外层表格设置max-width:600px，适配移动端和窄屏客户端。

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