在html表格中叠加图像

Question

我正在创建一个电子邮件模板并使用表来定位内容.我想将图像重叠在另一个上,但我无法这样做.我正在连续使用以下内容,但它似乎不起作用.如果有人可以帮助我,我真的很感激.

 <td colspan="3" style="padding: 14px; background-color: rgb(241, 241, 241); font-size: 11px; font-family: arial,helvetica; color: rgb(69, 85, 95);
.under{
position:absolute;
left:80px;
top:0px;
z-index:-1;
}
.over
{
position:absolute;
left:50px;
z-index:1;
}">

Answer 1

你有几个问题:

1. 您不能将类放在style属性中.
2. 显然,你试图绝对定位你的图像,但他们的父母有position: static(默认),所以他们将被定位在(可能)身体而不是表格单元格.绝对定位的元素相对于其最近的祖先定位,其位置不是静态的.
3. 根据浏览器设置positionon a <td>可能有效也可能无效,CSS2实际上表示position:relative对表元素的设置会导致未定义的行为.

你需要把一个<div>放在你的<td>相对位置.然后把图像放在里面<div>,因为你正在处理电子邮件,所以内联他们的风格.结果将是这样的:

<table>
    <tbody>
        <tr>
            <td>
                <div style="width: 100px; height: 100px; position: relative; border: 1px solid #000;">
                    <img src="http://placekitten.com/50/50" width="50" height="50" style="position: absolute; top: 0; left: 10px; z-index: 2; border: 1px solid #0ff;">
                    <img src="http://placekitten.com/75/75" width="75" height="75" style="position: absolute; top: 0; left: 20px; z-index: 1; border: 1px solid #f00;">
                </div>
            </td>
        </tr>
    </tbody>
</table>

我<div>为了演示目的添加了边框,小猫和明确的大小.这里有一个实时版本:http://jsfiddle.net/ambiguous/TkF24/

电子邮件客户端将过滤CSS,取决于客户端.您可能需要手动将图像粘贴在一起,然后仅引用一个图像以使其可靠地工作.