Oracle Apex HTML邮件CSS定位失效问题求助

问题1：图片上方文本显示在图片下方的原因及修复 #

原因 #

绝对定位的元素（.top_image_title2）的父容器未设置position: relative，导致该元素默认相对于整个文档而非图片容器定位，最终位置偏离预期。

修复 #

给包含图片的外层div添加position: relative属性，让内部绝对定位元素以该容器为基准定位；同时调整.top_image_title2的定位参数，确保文本覆盖在图片上方。

问题2：文本未实现“居中容器内左对齐”的原因及修复 #

原因 #

.greeting、.greeting_msg等元素被设置了position: absolute，脱离了文档流，父容器的text-align: center无法对其生效；同时代码中重复定义了position: absolute和left属性，进一步打乱了布局逻辑。

修复 #

移除这些元素的position: absolute和left属性，让它们留在正常文档流中，依赖父容器的text-align: center（外层居中）和display: inline-block; text-align: left（内部左对齐）实现预期布局。

修改后的PL/SQL代码 #

DECLARE
    l_body        CLOB;
    l_body_html   CLOB;
    l_img_html    CLOB;

BEGIN
    l_body_html := '<!DOCTYPE HTML>'
                   || '<html>'
                   || '<head>'
                   || '<meta http-equiv="Content-Type" content="text/html; charset=utf-8">'
                   || '<meta name="viewport" content="width=device-width">'
                   || '</head>'
                   || '<style>.top_image {height: 300px;width: 70%;display: block;margin-left: auto;margin-right: auto;}
                      .top_image_title {font-family: Georgia, serif;font-size: 80px;position: absolute;top: 352px;left: 722px;}
                      .top_image_title2 {color: white;font-family: Georgia, serif; font-size: 80px;position: absolute; bottom: 20px;left: 20px;}
                      .greeting {color: black; font-family: Georgia, serif; font-size: 40px; margin: 0;}
                      .greeting_msg {line-height: 1.6; width: 72%; font-size: 24px; margin: 0;}
                      .section_title {line-height: 1.6; width: 72%; font-size: 24px; margin: 0;}
                      .section_body {line-height: 1.6; width: 72%; font-size: 24px; margin: 0;}'
                   || '<body>'
                   || '<div style="height: 1530px;">'
                   || '<div style="height: 300px; position: relative;">' -- 添加position: relative，高度匹配图片
                   || '<img class="top_image" src="'
                   || apex_mail.get_instance_url
                   || :app_images
                   || :P100_IMAGE || '" alt="ironman"/>'
                   || '<div class="top_image_title2">'|| :P100_TEXT_ON_IMAGE  ||'' -- 移除行内重复定位样式
                   || '</div>'
                   || '</div>'
                   || '<div style="text-align: center; margin-top: 30px;">'
                   || '<div style="display: inline-block; text-align: left;">'
                   || '<p class="greeting">Hello</p><br><br><br>'
                   || '<p class="greeting_msg">This is an Email</p><br><br><br><br><br><br>'
                   || '</div>'
                   || '</div>'
                   || '</div>'
                   || '</body>'   
                   || '</html>';  
    l_body := 'Please use HTML enabled email client to view this message.';
    apex_mail.send(
        p_to          => 'email@email.com'
        ,p_from        => 'noreply@example.com' -- 修复邮箱格式错误
        ,p_body        => l_body
        ,p_body_html   => l_body_html
        ,p_subj        => 'Referring hosted images'
    );

    apex_mail.push_queue;
END;

额外优化说明 #

• 调整图片容器高度为300px，匹配图片高度，确保定位基准准确；
• 移除行内样式中重复的定位属性，统一用CSS类管理；
• 修复发件人邮箱格式错误；
• 给文本容器添加margin-top，避免与图片过于紧凑。

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