图像放在一张桌子上 - HTML邮件

时间:2014-09-15 09:02:59

标签: html css html-table html-email

我正在寻找一种可能的方法来覆盖一些表格。我尝试过Z-positioning,但它并没有。也许我做得不对。我希望有人可以给我一些提示,让我朝着正确的方向前进。

提醒: 我无法使用div,因为它是一封HTML邮件。

CodeSample:

<table width="100%" align="center" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td align="left" bgcolor="ffffff" width="69%" class="bodycopy shadow" style="padding: 10px;">
            <p class="h1">Lorem Titel            </p>
            <p class="h2">Lorem subtitle
            </p>
            <p class="bodycopy">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum eleifend purus, eu lobortis odio viverra ac. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas non lobortis purus, et convallis dolor. In euismod felis sed ex consequat, non suscipit magna laoreet. Etiam non libero consequat erat interdum sollicitudin nec ut est. Nam quis nisl mi. Nulla lobortis justo nulla, ac vestibulum mauris dictum nec.
                <br />
                <br />Lorem ipsum.
                <br />dolar sit amet
            </p>
            <a href="#" </a>
        </td>
        <td width="2%">
            <img style="top: 0; z-index: 2; border: 1px solid #f00;" src="Fotos/icon-vb.gif">
        </td>
        <td align="right" class="shadow" width="29%">
            <img class="fix" src="ipod.gif" width="100%" border="0" alt="" />
        </td>
    </tr>
</table>

1 个答案:

答案 0 :(得分:1)

在html和CSS中进行以下更改。将z-index: 999;position:absolute;添加到小图片,将position:relative;添加到其他

<强> FIDDLE DEMO

<强> HTML

 <img class='smallimg' src="Fotos/icon-vb.gif">

<强> CSS

  .smallimg {
    z-index: 999;
    position:absolute;
    border: 1px solid #f00
}
.fix {
    position:relative;
}