Question

我今天正在考虑CSS定位模式，并意识到除了让position:relative处理子元素之外，我从不使用position:absolute。

我更像是“开发人员”而不是“设计师”，但多年来我已经做了很多基于CSS的布局。我已经使用了表格，浮点数，边距（正面和负面），位置：绝对位置，甚至位置：固定，但我认为我从未有过使用位置的场合：相对于实际定位元件。

是否有一些伟大的CSS-guru技术依赖于position：relative（并用于实际设计）？我错过了吗？

Answer 1

我过去曾使用posotion: relative作为容器元素，其中包含绝对定位的元素（就像一个居中的三列布局）。例如：

我没有给容器任何偏移量，但是用position: relative定位它允许我绝对地将列相对于容器定位。如果容器默认设置为position: static，则列将相对于浏览器视口绝对定位，而不是容器。

Answer 2

如果你想要偏移一个元素而没有利用边缘及其对其他元素的影响，这是很有用的。假设你想故意从容器的侧面捅出一个图像，并且（几乎）与它旁边的容器中的某些内容重叠。

------------- -----
|           | |   |
|   X  -------| Y |
|      |  a  ||   |
|      -------|   |
------------- -----

容器a是X的正常文本流的一部分，你想保持这种方式，你只是希望它作为一个整洁的效果戳出一边。如果你用边距做到这一点，它可能会变得非常混乱并重新转换你的其他一些内容通过使用position: relative; left: 10px;，您可以轻松获得该效果，而不会产生副作用。

Answer 3

我使用position:relative;，以便上标字符仍然可以在vertical-align: top;之上升，但不允许它们混淆我的段落的前导。

sup { 
    font-size: .7em;
    vertical-align: top;
    position: relative;
    top: -.1em;
}

Answer 4

我不止一次地使用它来显示标题图像之类的内容，例如：

<div id="header">
  <div id="logo"></div>
<div>

CSS：

#header { width: 1024px; margin: 0 auto; background: url(string.jpg); }
#logo { position: relative; left: 40px; background: url(logo.jpg); }

在这种情况下，标题在背景图像中一直有大条纹，标志位于条纹中稍微偏移一点。在某些情况下比填充/边距更简单，我认为可能会转移一些东西，也许只是意见。

Answer 5

当我想要相对于其父元素定位一些绝对元素时，我主要使用它。在这种情况下，父元素需要设置为position: relative。这就是它的用武之地。

此外，我还使用它来修复带有背景图像的块元素中的IE6 / 7 haslayout /闪烁错误。