什么是位置:相对有用?

如果您希望偏移一个元素而不使用边距及其对其他元素的影响,这将非常有用。假设您有意让图像从容器的侧面探出,并且(几乎)与旁边容器中的某些内容重叠。

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

集装箱 a 是正常文本流的一部分 X 你想保持这样,你只想让它从侧面露出来,有点整洁的效果。如果你这样做的利润率,它可能会变得非常混乱和回流的一些其他内容。
通过使用 position: relative; left: 10px; 你可以很容易地得到这种效果,而没有副作用。

我已经用过 posotion: relative 在过去,对于容器元素,其中包含绝对定位的元素(类似于居中的三列布局)。例如:

alt text http://www.freeimagehosting.net/uploads/2573654d07.png

我没有给容器任何偏移,但是用 position: relative 允许我绝对定位相对于容器的列。如果容器设置为 position: static ,默认情况下,列将绝对定位在相对于浏览器视口的位置,而不是相对于容器的位置。

我用 position:relative; 使上标字符仍能上升到 vertical-align: top; 但不允许他们干扰我段落的开头。

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

我不止一次用它来显示标题图片之类的东西,比如:

<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); }

在这种情况下,头部有一个大条纹作为背景图像,整个过程中,标志坐在条纹只是偏移了一点。在某些情况下比填充/边距更简单一些,我想,这可能只是意见。

我主要使用它,当我想定位一些绝对元素相对于它的父元素。在这种情况下,需要将父元素设置为 position: relative . 这就是它的用途。

此外,我还使用它来修复ie6/7的haslayout/闪烁错误块元素与背景图像。