位置：相对有什么用？
我今天正在考虑 CSS 定位模式，并意识到除了使 position:absolute 对子元素起作用之外，我从未将 position:relative 用于任何其他用途。
我更像是一名“开发人员”而不是“设计师”，但这些年来我已经完成了相当多的基于 CSS 的布局。我使用过表格、浮动、边距（正值和负值）、位置：绝对，甚至位置：固定，但我认为我从来没有使用过位置：相对来实际定位元素。
是否有一些伟大的 CSS 大师技术依赖于位置：相对（并在现实世界的设计中使用）？我错过了吗？
I was thinking about CSS positioning modes today and realized that I never use position:relative for anything other than making position:absolute work on child elements.
I'm more of a "developer" than a "designer", but I've done quite a few CSS-based layouts over the years. I've used tables, float, margins (positive and negative), position:absolute, and even position:fixed, but I don't think I've ever had an occasion where I've used position:relative for actually positioning an element.
Is there some great CSS-guru technique that relies on position:relative (and is used in real-world designs)? Am I missing out?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
如果您想偏移一个元素而不用担心边距及其对其他元素的影响，那么它很有用。假设您想要故意将图像从容器侧面伸出，并（几乎）与其旁边容器中的某些内容重叠。
容器
a是X正常文本流的一部分，您希望保持这种状态，您只是希望它从侧面伸出一点，作为一种简洁的效果。如果您使用边距来做到这一点，它可能会变得非常混乱并重排您的一些其他内容。通过使用
position:relative; left: 10px;您可以轻松获得该效果，而不会产生副作用。It's useful if you want to offset an element without futzing around with margins and its consequences for other elements. Let's say you want to intentionally have an image poke out of the side of a container and (nearly) overlap with some content in a container beside it.
Container
ais part of the normal text flow ofXand you want to keep it that way, you just want it poking out of the side a bit as a neat effect. If you do that with margins, it may get really messy and reflow some of your other content.By using
position: relative; left: 10px;you can get that effect easily without the side effects.我过去曾使用
position:relative作为容器元素，其中包含绝对定位的元素（如居中的三列布局）。例如：我没有给容器任何偏移量，但是使用
position:relative定位它允许我相对于容器绝对定位列。如果容器设置为position: static（默认情况下），则列将相对于浏览器视口而不是容器绝对定位。I've used
posotion: relativein the past for a container element, with absolutely positioned elements inside it (like a centered three column layout). For example:I don't give the container any offset, but positioning it with
position: relativeallows me to absolutely position the columns relative to the container. If the container is set toposition: static, as it is by default, then the columns will be absolutely positioned relative to the browser viewport, not the container.我使用
position:relative;，这样上标字符仍然可以上升到vertical-align: top;之上，但不允许它们弄乱我的段落的开头。I use
position:relative;so that superscript characters can still ascend abovevertical-align: top;but doesn't allow them to mess with the leading of my paragraphs.我不止一次地使用它来显示标题图像之类的内容，例如：
CSS：
在这种情况下，标题有一个大条纹作为背景图像，徽标位于条纹中，只是稍微偏移了一点。我认为在某些情况下比填充/边距更简单，可以稍微改变一些东西，也许这只是意见。
I've used it more than once to display things like header images, something like:
CSS:
In this case the header has a large stripe all the way across as a background image, the logo sits in the stripe just offset a bit. Simpler than padding/margin in some cases to shift stuff around a bit I think, maybe it's just opinion.
当我想要相对于其父元素定位某个绝对元素时，我主要使用它。在这种情况下，父元素需要设置为
position:relative。这就是它的用途。此外，我还到处使用它来修复带有背景图像的块元素中的 IE6/7 haslayout/flickering bug。
I mainly use it when I want to position some absolute element relative to its parent element. In that case the parent element need to be set to
position: relative. That's where it is for.Further I also use it here and there to fix IE6/7 haslayout/flickering bugs in block elements with a background image.