嵌入式DIV元素的水平定位

Question

请帮我在HTML和CSS中设计上面的例子。说明：

• 每个矩形都是div。
• 有一个黑色的容器DIV，被A B C D角包围。
• 在容器div内有两个TIER1 div，浅灰色和深灰色。
• 那些TIER1 div本身包含子div，它们可以包含其他子div。
• 换句话说，NESTED divs。因此：父母包含孩子。
• 重要：水平定位必须是绝对的;简单地将下一个div放在前一个旁边就不是我想要的。如您所见，红色div不会在浅灰色TIER1 div的开头处开始;这是故意的。
• 不同的TIER应该有垂直缩进;正如您所见，TIER3在顶部有一个边距，以便显示父div。

他们想要实现的方法如下：

• 样式表包含通用CSS代码; HTML页面包含每个子DIV的定位，使用'left = Xpx'或'margin-left：Xpx'结合'width = Xpx'。
• 筑巢不一定是完美的;我的代码将生成子div，以便它们不超过其父div。所以实际的HTML代码可能只是一个容器div中的一堆div;它只是看起来像它们是嵌套的。我认为这比在HTML代码中实际嵌套div更容易。
• DIV使用简单的'background = #XXX'获得颜色。

换句话说，我想玩'画布'并在位置0,0 = A和100​​,100 = D的角度绘制矩形.HTML代码将提供那些坐标，从开始（左上）到结束（右下）。

我一直在玩display：table，float：left，margin-left和其他东西，但是无法让它工作。 div元素的水平定位对我来说一直是CSS的棘手方面。但我认为这可行。请帮帮我，谢谢你！

Answer 1

好的，我解决了这个问题，对于遇到类似问题的人来说，这是解决方案：

<!-- container DIV uses relative position -->
<div style="position:relative">

 <!-- sub DIVs use absolute positioning and can be positioned with CSS: -->
 <div style="position:absolute; left:100px; top:10px; width:200px; background:#00f"></div>

 <!-- you can have as many DIVs as you want, and they may overlap each other, they will not push each other out of the way -->
 <div style="position:absolute; left:80px; top:20px; width:200px; background:#f00"></div>

</div>