我刚接触编码、XHTML、CSS和PHP。我看了很多关于定位的教程，比如relative（相对定位）、absolute（绝对定位）和fixed（固定定位），但是我不知道什么时候应该使用它们或者什么时候最适合使用它们。我希望能有一些例子。
5个回答
9
ALA有一个不错的教程（有很多例子）CSS定位101。当您需要定位无法在正常流中定位的内容时，CSS定位特别有用。
- DrStrangeLove
5
1谢谢。当你说“它不能在正常流程中定位”时，什么被认为是“正常流程”？ - PeanutsMonkey
http://www.w3.org/TR/CSS2/visuren.html#normal-flow 这基本上是指HTML元素默认如何叠放在彼此之上...请访问我提供的链接并仔细阅读...（尤其是ALA）。 - DrStrangeLove
谢谢。我看了ALA的文章，确实很有见地，虽然没有完全遵循W3设定的大纲，特别是关于不要“同时”进行的部分。 - PeanutsMonkey
你的意思是不同时进行吗？ - DrStrangeLove
@DrStrangeLove - 这就是w3.org/TR/CSS2/visuren.html#normal-flow上所说的。 - PeanutsMonkey
5
要理解CSS定位，您需要熟悉“CSS BOX模型”
网上有大量的教程。以下是一些适合初学者的带有示例的好教程：
http://www.brainjar.com/css/positioning/default.asp
- Satish
1
1谢谢。我已经了解了CSS盒模型，但是它们中没有一个解释我应该在什么情况下使用相对定位、绝对定位和固定定位。我知道有一个适用于所有情况的答案，但是了解一下会很好。 - PeanutsMonkey
4
我经常使用的两种定位方式是：
相对定位：帮助你相对于其他元素来设置样式。例如，你想要将一个输入框相对于它所在的 div 向右移动。
固定定位：非常适合像刷新建议这样的东西，“固定”在屏幕上，无论你滚动到哪里都会跟随你。
最好自己尝试一下，看看效果如何。
- Kamil Sindi
2
当你说“相对于彼此”时，这究竟是什么意思？例如，假设我的标志元素在左侧，我想要我的导航显示在它的右侧，这是否意味着我想将其相对于我的右侧位置定位？我看到了一些将相对和绝对结合使用的例子，但我还是不太清楚。据我多次听到的，应该远离 W3Schools，因为他们不遵守标准... - PeanutsMonkey
嗯，似乎有人批评W3学校。当我需要参考简单的东西时，我喜欢使用它，但也许它并不是最好的选择。关于你的相对定位问题，你是正确的，你正在将导航栏相对于左侧的标志进行定位。我从未使用过绝对定位，所以不知道它是否可用。 - Kamil Sindi
0
我的理解是，我们应该在以下情况下使用定位：要将任何CSS元素相对于视口(position:fixed)放置或者要将CSS元素相对于容器(container get position:relative and child get position:absolute)放置。但是，在使用绝对定位或固定定位之前，您应该了解其限制。绝对定位和固定定位不会对父元素的高度产生影响。这可能会导致各种意外的结果。假设您想在相对元素上应用背景图像，其中包含大部分内容的是绝对元素。背景图像将不会覆盖您的内容，因为它不会获得内容的高度。此外，您不应过度依赖top/left/bottom/right来放置元素。它们可能会帮助您在一个视口大小上获得预期的排列，但可能会在其他视口大小/分辨率上完全扭曲它。
- YATIN GUPTA
0
为了有效地使用CSS进行布局，了解如何使用它来定位页面内容是很有帮助的。本文概述了CSS2规范中控制视觉呈现的方法和规则，并指出了一些需要注意的事项。
- Najam Guru
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接