具有**相对定位**的页面元素可以让您控制在其中**绝对定位**子元素。
对有些人来说，这显而易见。 对另一些人来说，这可能是那些 CSS “啊哈！”时刻 之一。 我记得当我第一次“理解”它时，它对我来说是一个大事。
这里有一个视觉效果
父元素上的相对定位是这里的**大事件**。 看一下如果你忘记了会发生什么
这是一个重大的变化。 正在发生的事情是绝对定位的元素相对于 body 元素进行定位，而不是相对于它们的直接父元素。 因此，如果浏览器窗口变大，左下角的那个元素将与浏览器窗口保持一致，而不是像第一个图像中那个行为良好的兄弟一样后退。
一旦你“理解”了这个概念（击鼓声），你就会发现它在很多地方都有很小的用处，并开始注意到其他地方使用它的例子。 就像当你学会一个新词，然后你开始到处听到它一样。 是的。
您可以在此处使用上述演示
来点例子怎么样？
我很乐意。
 | 一个你总是希望它位于盒子左上角的“关闭”按钮（以复制操作系统窗口）。 |
 | 一个位于窗口右上角的“主页”按钮，这样你的用户永远不会感到迷路。 |
 | 一个注册表单上的提醒，提醒用户如果他们已经是会员，请在上面登录。 |
 | 每个大型文本块右下角的“返回顶部”链接。 |
啊哈！ 谢谢 Chris。 :)
这绝对是我的“啊哈！”CSS 时刻，当我意识到这一点时，我意识到我可以做任何事情。
是真的吗？“position:” 的跨浏览器支持不稳定吗？ 因为我以前总是使用定位来构建我的页面，并且有人告诉我，由于支持减少，我应该始终尝试使用浮动来组织我的列。
绝对定位的元素相对于第一个非静态定位的祖先进行定位，这里没有，所以它们相对于**html**进行定位（这可以通过在**body**中添加**margin-top**来看到，而 Back-Home 图像不会移动）。
预览在 Safari 中看起来很糟糕，真的很乱 o.o 你测试过吗？ 还是我的 Safari 4.0 开发人员版有问题 =/
在我的 Safari 3.1.1 中看起来还不错。 “在上面登录”按钮比它应该的位置高一点。 可能是 Safari 渲染字段集的方式有所不同。
此技巧也可用于使用 CSS 制作图像地图。 这比通常的 html 图像地图灵活得多，可以做更多的事情。
这是我总是搞错方向的事情，仅仅出于语义原因； 我总是认为我应该相对于绝对元素定位子元素，但实际上它们是相对于相对元素的绝对项目，这似乎很奇怪！
我有点像 Epic。 我认为将相对应用于某些东西会使该东西相对于包含它的任何东西都处于相对状态。 我前几天晚上就有点意识到自己错了，但听到有人这样说还是很好，因为在我看来这仍然不太对。
谢谢
好帖子。 我最近也经历了这个“啊哈！”时刻。 真的让事情变得更容易。 我想知道为什么当我将我的盒子放在另一个盒子里面时，我的盒子会定位到浏览器窗口的最左边。 但是啊哈！ 我需要给外层盒子一个相对位置。
有时，那些看似简单的事情需要用清晰的语言和一个好的图表来解释。
我的天啊！ 我弟弟最近问我一个类似的问题……这绝对是“啊哈”时刻。 我一直以为默认是相对的，所以我没有意识到发生了这种情况……就是这样！
我会把链接发给我兄弟：D
当我发现绝对定位某物而没有参数（right、top 等）会把它放在它通常会去的地方，但会把它从流中移除，这样它就会出现在其他元素的顶部时，我也有过这样的时刻。 我用它来使一个透明背景的图像略微重叠一些 div。
很棒的例子，Chris。 做得好！
我已经做 CSS 一段时间了，当我在一两周前学会这一点时，这绝对是一堂重要的课。 然而，你的帖子可能帮助我真正记住它……谢谢！
嗯，完全偏题，但你有没有碰巧知道你图标示例中那个灰色字体是什么，它真的很好看……？
@James: “议程”
时间完美。 有没有办法将元素水平居中以及垂直放置到底部？
另一个“啊哈”时刻，我爱你，谢谢。
啊哈！
:D 谢谢！！ 这过去让我绞尽脑汁。 现在我终于明白了。 ^.^
感谢这个教程。 我总是使用 CSS 定位时遇到问题。 现在，我有了更多知识。
致敬,
AM
我想你每天真的能学到新东西（只要有像这样的网站 :)
真是想不到，我一直都在使用浮动
相对定位比绝对定位好吗？
感谢这个教程。 我总是使用 CSS 定位时遇到问题。 现在，我有了更多知识。
没想到会这样，但是：哇！ 这是一个“啊哈”时刻:) 用它来嵌套列表以水平显示它们，效果很好（就我目前所知）！ 谢谢！
做得好
我有一个相对定位的 div，它没有特定的高度，并且在它里面有一个绝对定位的 div。我希望相对定位的 div 能够拉伸以容纳绝对定位的 div。
这不起作用，因为绝对定位的 div 会在相对定位的 div 边界之外渲染。
例如，这里有一个相对定位的 div，在它里面有一个绝对定位的 div 来显示一个红色框。
reldiv {
position: relative;
text-align: left;
}
absdiv {
position: absolute;
top: 200;
left: 200;
width: 50px;
height: 50px;
border: 1px solid #ff0000;
}
嗨
有没有什么解决方法？
好的信息！
……但我对上面 MeepMeep 的问题也有同样的疑问。
当使用一个相对定位的容器，并且在它里面有绝对定位的元素时，绝对定位的元素会被从容器的正常流中移除，并且容器会以“空”的方式渲染。当对容器应用背景时，这一点尤为明显，因为容器不再根据内部元素的流而“拉伸”到适当的大小。
尝试使用“清除修复”方法，就像你对浮动元素所做的那样，但绝对定位似乎完全将它们从流中移除，所以这种修复方法不起作用。
有没有 CSS 大师有解决方案？（请不要说浮动）
绝对是“啊哈”！谢谢！
这种父子关系并不总是好的。
问题在于，如果你需要使用相对定位的父元素和绝对定位的子元素，而子元素在父元素框之外，并且宽度为 100%。这样子元素就会获得父元素的宽度，而不是“正常”的宽度。
我还没有找到任何解决此问题的办法。所以，如果你有一些关于取消此父元素规则的想法，请发表出来。=)
让我再说一遍我认为我在这里学到的东西。父元素应该使用 {position: relative} 定位，这样你就可以在内部元素上使用 {position: absolute}。如果是这样，并且似乎是这样，那么我一直在做错。我刚好在论坛上与一个人交谈，他建议 {position: absolute} 应该很少使用。但是，如果我理解这篇文章的含义，我应该用它来定位包含在相对定位的父元素（如 div）中的元素。如果这是正确的，那么我认为我会经常使用它，只是不是我以前使用它的方式。
你让我的今天过得愉快！
啊哈！！:) ++
谢谢！为我节省了很多工作！
嗨克里斯，感谢你的解释。
我试图理解 CSS 2 规范 (http://www.w3.org/TR/CSS2/visuren.html#choose-position) 在哪里描述了你关于父元素需要有 position: relative 的说法。规范说，对于一个使用绝对定位的框，top/bottom/left/right “属性指定相对于框的包含块的偏移量”。包含块被定义为“表示“框所在的包含块”。我没有看到任何关于父元素（或祖先）需要有 position: relative 才能成为后代偏移量相对于其解释的包含块的信息。
我读过其他人说你所说的话，但我正在尝试在规范中找到它，到目前为止还没有找到。
谢谢，它真的解决了我的问题。继续努力！:)
爱因斯坦会为相对论甚至在 CSS 中都适用而感到自豪！
这在 Chrome 中运行完美，但不知何故 Firefox 将绝对定位的 div 视为正常元素。有什么想法可以使 FF 的行为像 Chrome 一样吗？
嗨克里斯,
非常感谢你，你的网站帮助我很多。
有一个问题我无法找到任何解决办法，无论是自己想出来的还是在网上找到的。问题是如何使一个容器包含在一个相对定位的 div 中的绝对定位的 div。无需说明高度是动态的，我们也不想使用 JS。
你有什么想法吗？
谢谢克里斯，另一篇很棒的文章。文章中的图表很好地说明了这一点。
谢谢克里斯！你真是太有帮助了！你能告诉我，是否有办法像静态定位元素那样将子元素放在父元素外面，即使父元素的 position 是 relative？如果你有时间的话，请……
在演示中，几个 label 元素的“for”属性指向错误或不存在的输入。
label for=”name” 用户名 /label
input id=”username” type=”text” name=”username” /input
应该是 label for”username”
最后，我弄清楚了绝对定位和相对定位的使用。以前我对此很困惑。谢谢！！
最后 *一个清晰的例子……
完美！
啊哈！所以这就是为什么我的 div 会锚定到页面边缘！！
非常简单但非常有用的提示！
克里斯，你太棒了！
啊哈！谢谢！！
“父元素上的相对定位是这里最重要的” 是的！谢谢！
“啊哈！”时刻，谢谢！
我是那些“啊哈！”的人之一。我更像是一个程序员，而不是一个 CSS 设计师，所以这正是我需要知道的内容！谢谢！