css - position:relative 有什么用？

Question

今天我在考虑 CSS 定位模式，并意识到除了在子元素上工作position:relative之外，我从不使用任何其他方式。position:absolute

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

是否有一些很棒的 CSS-guru 技术依赖于 position:relative （并用于现实世界的设计）？我错过了吗？

score 6 · Accepted Answer

我posotion: relative过去曾将容器元素用于容器元素，其中包含绝对定位的元素（如居中的三列布局）。例如：

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

score 6 · Accepted Answer

如果您想抵消一个元素而不用考虑边距及其对其他元素的影响，这很有用。假设您想故意将图像从容器的侧面伸出，并（几乎）与旁边容器中的某些内容重叠。

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

容器a是正常文本流的一部分X，你想保持这种状态，你只是想让它从侧面伸出一点，作为一个整洁的效果。如果您使用边距执行此操作，它可能会变得非常混乱并重排您的其他一些内容。
通过使用position: relative; left: 10px;，您可以轻松获得该效果而不会产生副作用。

score 2 · Accepted Answer

我使用position:relative;这样上标字符仍然可以升到上面，vertical-align: top;但不允许它们弄乱我的段落的开头。

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

score 1 · Accepted Answer

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

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

在这种情况下，标题有一个大条纹作为背景图像，徽标位于条纹中，只是稍微偏移了一点。在某些情况下，我认为比填充/边距更简单地改变一些东西，也许这只是意见。

score 1 · Accepted Answer

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

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

5 回答 5