在没有“位置”属性的情况下实现绝对定位，使用边距/填充

Achieving Absolute positioning without Position attribute, using Margin/Padding

本文关键字：定位 填充 实现 位置 情况下 属性      更新时间：2023-09-26

我正在努力构建基于电子邮件的HTML。现在我们知道，电子邮件客户端不支持位置属性，所以我将不得不在没有它的情况下继续。现在，看看我的选择...我可以选择边距或填充来定位元素。输入元素可以是相对定位的，也可以是绝对的。我现在只说绝对的部分。因此，我的输入将是例如 

One Parent DIV (top:0, left:0)
A Child DIV (top:20, left:20)
Second Child DIV (top:20, left: 200)

现在，在基于浏览器的普通HTML中，这些元素可以很容易地放置在适当的位置。但是没有position: absolute甚至顶部，左边的属性。由于边距属性相对于其他元素排列元素，因此这变得很棘手。下面是一个运行示例：

<div style="width: 600pt; height: 600pt; border:2px solid red; margin-left:20pt; margin-top: 30pt">
    <div style="width: 100pt; height: 100pt; border:2px solid black; margin-left:20pt; margin-top: 30pt"></div>
    <div style="width: 100pt; height: 100pt; border:2px solid black; margin-left:20pt; margin-top: 30pt"></div>
    <div style="width: 100pt; height: 100pt; border:2px solid black; margin-left:20pt; margin-top: 30pt"></div>
</div>

小提琴

我的预期结果是，所有黑色的div相互重叠，放置在相同的位置。如果它根据"父元素"计算边距，但它从父元素向左边距，从前面元素顶部向左边距，这是可能的。

所以我现在的问题是，有没有一种侧面方法可以使用左边距，顶部作为顶部，左侧属性并产生与位置：绝对相同的行为？或者简单地使用边距或填充属性将这三个元素放在彼此之上（无位置，因为电子邮件客户端不支持它）

我也知道，将 Divs 用于电子邮件不是最好的方法，我应该考虑使用表格，但相信我，我正在处理的那种 HTML 只能使用 Div 生成，有些玩弄边距或填充。任何帮助将不胜感激。

您可以使用负边距来实现重叠。

margin-top: -50pt

http://jsfiddle.net/pkdqh7kt/1/

以下是水平堆叠div 的示例：

http://jsfiddle.net/pkdqh7kt/2/

您还可以查看此表以了解主要电子邮件客户端当前支持哪些 CSS 属性。

相关文章：