Css 在容器div内定位div，而上部div的内容不会影响下部div的位置

我正在尝试完成以下布局

我就快到了，除了最后一个绿色div，它会随着内容（白色）div的内容而越来越低。如果我为绿色div的TOP属性设置一个值，然后向内容div添加更多的文本，绿色div就会越来越低

由于绿色div是主容器div的子对象，并且绿色div是相对定位的，所以它不应该专门放置在它的顶部值指示的位置吗？如果我不正确…有人能告诉我如何使绿色div始终显示在容器（灰色）div内的同一位置，而不管内容/白色div的高度如何

我试图在这里粘贴css代码，但浏览器出现问题。您可以在以下位置查看测试站点源代码/css

---

tia需要帮助。

我想你误解了相对定位的工作原理。如果某个元素被标记为

位置：relative

，那么这对该元素的位置没有任何影响。但是，任何具有

位置：绝对
的子元素都是相对于该元素定位的

因此，您需要的基本框架是：

#main { position: relative; }
#menu { position: absolute; top: 10; right: 10; }
#content { position: absolute; top: 30; }
#contact { position: absolute; top: 180; right: 10; }

看一看。这称为相对+绝对定位。
如果要将某个对象定位在同一位置，请使用position:absolute。位置：相对用于将图元放置在正常流中后移动图元

记住：对于position:absolute 0，0是第一个（当从元素走到根元素时，离元素最近）父元素的左上角，position:relative或position:absolute
谢谢cletus，我将尝试您的建议…只是好奇：如果主容器设置为relative，我想要定位为绝对的绿色div，联系人div是否会受到上面div的内容或高度的影响（在html标记中的第一个）？cletus，我刚刚测试了你的建议，但我仍然有同样的问题。我定义了左上角的值，以便将联系人div放置在我想要的位置，但是如果我向内容div添加更多文本，联系人div将被推到比预期更低的位置。有没有办法避免这种情况，使触点div位置不受上div内容的影响？无需担心。我用的是左上角，而不是右下角。子div的相对+绝对和右下角有效。谢谢你，谢谢你，马丁。由于cletus提供了一个指向一篇有用文章的链接和我的问题的示例标记，我将他的答案标记为正确答案。