Javascript 使用边距/填充实现无位置属性的绝对定位

我正在构建基于电子邮件的HTML。正如我们所知，Position属性在电子邮件客户端中不受很好的支持，所以我将不得不继续使用它。现在，看看我的选择。。。我可以选择边距或填充来定位元素。 输入元素可以是相对定位的，也可以是绝对的。我现在就要绝对的部分。因此，我的输入将是例如

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

现在，在一个普通的基于浏览器的HTML中，这些元素可以很容易地放置在适当的位置上。但是没有

位置：绝对
或甚至顶部、左侧属性。这变得很棘手，因为margin属性相对于其他元素排列元素。以下是一个运行示例：

<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相互重叠，放在同一个位置上。如果它根据“父元素”计算边距，但它是从父元素向左边距，从上一个元素向上边距，则这是可能的

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

<>我也知道，使用div做电子邮件不是最好的方法，我应该考虑使用表，但是相信我，我处理的HTML只能用div来生成，还有一些用边距或填充物来播放。任何帮助都将不胜感激。
您可以使用负边距实现重叠

margin-top: -50pt


下面是一个水平堆叠div的示例：


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