html - 嵌入式 DIV 元素的水平定位

Question

请帮我用 HTML 和 CSS 设计上面的例子。说明:

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

我喜欢的实现方式如下:

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

换句话说，我想玩“ Canvas ”并在位置 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>