CSS style = "position:absolute" 和 style = "position:relative" 的区别
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4457790/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Difference between style = "position:absolute" and style = "position:relative"
提问by Varun
Can any one tell me the Difference between style = "position:absolute"and style = "position:relative"and how they differ in case I add it to div/span/inputelements?
任何一个可以告诉我之间的差异style = "position:absolute"和style = "position:relative"以及它们如何在不同的情况下，我把它添加到div/ span/input元素？
I am using absoluteright now, but I want to explore relativeas well. How will this change the positioning?
我现在正在使用absolute，但我也想探索一下relative。这将如何改变定位？
回答by AgentConundrum
Absolute positioning means that the element is taken completely out of the normal flow of the page layout. As far as the rest of the elements on the page are concerned, the absolutely positioned element simply doesn't exist. The element itself is then drawn separately, sort of "on top" of everything else, at the position you specify using the left, right, top and bottomattributes.
绝对定位意味着元素完全脱离了页面布局的正常流程。就页面上的其余元素而言，绝对定位的元素根本不存在。然后在您使用left, right, top and bottom属性指定的位置单独绘制元素本身，在其他所有内容的“顶部” 。
Using the position you specify with these attributes, the element is then placed at that position within its last ancestor element which has a position attribute of anything other than static(page elements default to static when no position attribute specified), or the document body (browser viewport) if no such ancestor exists.
使用您通过这些属性指定的位置，然后将该元素放置在其最后一个祖先元素中的该位置，该元素的位置属性不是static（当未指定位置属性时，页面元素默认为静态）或文档正文（浏览器视口）如果不存在这样的祖先。
For example, if I had this code:
例如，如果我有这个代码：
<body>
<div style="position:absolute; left: 20px; top: 20px;"></div>
</body>
...the <div>would be positioned 20px from the top of the browser viewport, and 20px from the left edge of same.
...<div>将位于距浏览器视口顶部 20px 的位置，距浏览器视口左边缘 20px 的位置。
However, if I did something like this:
但是，如果我做了这样的事情：
<div id="outer" style="position:relative">
<div id="inner" style="position:absolute; left: 20px; top: 20px;"></div>
</div>
...then the innerdiv would be positioned 20px from the top of the outerdiv, and 20px from the left edge of same, because the outerdiv isn't positioned with position:staticbecause we've explicitly set it to use position:relative.
...然后innerdiv 将位于距outerdiv顶部20px 和距 div 左边缘 20px 的位置，因为outerdiv 未定位 withposition:static因为我们已明确将其设置为 use position:relative。
Relative positioning, on the other hand, is just like stating no positioning at all, but the left, right, top and bottomattributes "nudge" the element out of their normal layout. The rest of the elements on the page still get laid out as if the element was in its normal spot though.
另一方面，相对定位就像根本没有声明定位一样，但是left, right, top and bottom属性将元素“轻推”到了它们的正常布局之外。页面上的其余元素仍然像元素在其正常位置一样布局。
For example, if I had this code:
例如，如果我有这个代码：
<span>Span1</span>
<span>Span2</span>
<span>Span3</span>
...then all three <span>elements would sit next to each other without overlapping.
...然后所有三个<span>元素将彼此相邻而不会重叠。
If I set the second <span>to use relative positioning, like this:
如果我将第二个设置<span>为使用相对定位，如下所示：
<span>Span1</span>
<span style="position: relative; left: -5px;">Span2</span>
<span>Span3</span>
...then Span2 would overlap the right side of Span1 by 5px. Span1 and Span3 would sit in exactly the same place as they did in the first example, leaving a 5px gap between the right side of Span2 and the left side of Span3.
...那么 Span2 将与 Span1 的右侧重叠 5px。Span1 和 Span3 将位于与第一个示例中完全相同的位置，在 Span2 的右侧和 Span3 的左侧之间留下 5px 的间隙。
Hope that clarifies things a bit.
希望能澄清一些事情。
回答by Premraj
Relative positioning:The element creates its own coordinate axes, at a location offset from the viewport coordinate axis. It is Part of document flow but shifted.
相对定位：该元素创建自己的坐标轴，位于与视口坐标轴偏移的位置。它是文档流的一部分，但已转移。
Absolute positioning:An element searches for the nearest available coordinate axes among its parent elements. The element is then positioned by specifying offsets from this coordinate axis. It is removed from document normal flow.
绝对定位：元素在其父元素中搜索最近的可用坐标轴。然后通过指定与该坐标轴的偏移量来定位元素。它从文档正常流程中删除。
回答by jbrennan
You'll definitely want to check out this positioning articlefrom 'A List Apart'. Helped demystify CSS positioning (which seemed insane to me, prior to this article).
您肯定会想查看“A List Apart”中的这篇定位文章。帮助揭开 CSS 定位的神秘面纱（在本文之前，这对我来说似乎很疯狂）。
回答by GowriShankar
With CSS positioning, you can place an element exactly where you want it on your page.
通过 CSS 定位，您可以将元素准确地放置在页面上的位置。
When you are going to use CSS positioning, the first thing you need to do is use the CSS property position to tell the browser if you're going to use absolute or relative positioning.
当您打算使用 CSS 定位时，您需要做的第一件事是使用 CSS 属性 position 来告诉浏览器您将使用绝对定位还是相对定位。
Both Postion are having different features.In Css Once you set Position then you can able to use top,right,bottom,left attributes.
两个 Postion 都有不同的特性。在 Css 中，一旦你设置了 Position，你就可以使用 top、right、bottom、left 属性。
Absolute Position
绝对位置
An absolute position element is positioned relative to the first parent element that has a position other than static.
绝对位置元素相对于具有非静态位置的第一个父元素定位。
Relative Position
相对位置
A relative positioned element is positioned relative to its normal position.
相对定位元素相对于其正常位置进行定位。
To position an element relatively, the property position is set as relative. The difference between absolute and relative positioning is how the position is being calculated.
为了相对定位元素，属性位置被设置为相对。绝对定位和相对定位之间的区别在于如何计算位置。
More :Postion Relative vs Absolute
更多：位置相对与绝对
回答by Alireza
OK, very obvious answer here... basically relativeposition is relative to previous element or window, while absolutedon't care about the other elements unless it's a parent if you using top and left...
好的，这里的答案非常明显......基本上相对位置是相对于前一个元素或窗口的，而绝对不关心其他元素，除非它是父元素，如果你使用顶部和左侧......
Look at the example I create for you to show the differences...
查看我为您创建的示例以显示差异...
Also you can see it in action, using the css I create for you, you can see how absolute and relative positions behave:
您也可以使用我为您创建的 css 来查看它的实际效果，您可以查看绝对位置和相对位置的行为：
.parent {
display: inline-block;
width: 180px;
height: 160px;
border: 1px solid black;
}
.black {
position: relative;
width: 100px;
height: 30px;
margin: 5px;
border: 1px solid black;
}
.red {
width: 100px;
height: 30px;
margin: 5px;
top: 16px;
background: red;
border: 1px solid red;
}
.red-1 {
position: relative;
}
.red-2 {
position: absolute;
}<div class="parent">
<div class="black">
</div>
<div class="red red-1">
</div>
</div>
<div class="parent">
<div class="black">
</div>
<div class="red red-2">
</div>
</div>回答by Pransh Tiwari
Relative:
相对的：
An element with
position: relative;is positioned relative to its normal position.If you add no positioning attributes (top, left, bottom or right) on a relative element it will have no effect on it's positioning at all. It will behave exactly as a
position: staticelement.But if you do add some other positioning attribute, say, top: 10px;, it will shift its position 10 pixels down from where it would normally be.
An element with this type of positioning gets affected by other elements and it itself also affects others.
元素
position: relative;相对于其正常位置进行定位。如果在相对元素上不添加定位属性（顶部、左侧、底部或右侧），则它根本不会影响它的定位。它的行为与
position: static元素完全相同。但是，如果您确实添加了一些其他定位属性，例如 top: 10px;，它会将其位置从通常的位置向下移动 10 个像素。
具有这种类型定位的元素会受到其他元素的影响，并且它本身也会影响其他元素。
Absolute:
绝对：
An element with
position: absolute;allows you to place any element exactly where you want it to be. You use the positioning attributes top, left, bottom. and right to set the location.It is placed relative to the nearest non-static ancestor. If there is no such container, it is placed relative to the page itself.
It gets removed from the normal flow of elements on the page.
An element with this type of positioning is not affected by other elements and also it doesn't affect flow of other elements.
元素 with
position: absolute;允许您将任何元素准确放置在您想要的位置。您使用定位属性顶部、左侧、底部。和设置位置的权利。它相对于最近的非静态祖先放置。如果没有这样的容器，它将相对于页面本身放置。
它从页面上的正常元素流中删除。
具有这种定位的元素不受其他元素的影响，也不会影响其他元素的流动。
See this self-explanatory example for better clarity. https://codepen.io/nyctophiliac/pen/BJMqjX
请参阅此不言自明的示例以获得更好的清晰度。https://codepen.io/nyctophiliac/pen/BJMqjX
回答by Damien-Wright
Absolute positioning is based on co-ordiantes of the display:
绝对定位基于显示器的坐标：
position:absolute;
top:0px;
left:0px;
^ places the element top left of the window.
^ 将元素放置在窗口的左上角。
Relative position is relative to where the element is placed:
相对位置是相对于放置元素的位置：
position:relative;
top:1px;
left:1px;
^ places the element 1px down and 1px from the left of where it originally sat :)
^ 将元素向下放置 1px，距它最初所在位置的左侧 1px :)
回答by Charles Zink
Absolute places the object (div, span, etc.) at an absolute forced location (usually determined in pixels) and relative will place it a certain amount away from where it's location would normally be. For example:
Absolute 将对象（div、span 等）放置在一个绝对强制位置（通常以像素为单位确定），而 relative 会将其放置在远离其通常位置一定距离的位置。例如：
position:relative; left:-20px;
位置：相对；左：-20px;
Might make the left side of the text disappear if it was within 20px to the left edge of the screen.
如果文本的左侧在屏幕左边缘 20 像素以内，则可能会使文本的左侧消失。
回答by Vil Ignoble
position: absolutecan be placed anywhere and remain there such as 0,0.
position: absolute可以放置在任何地方并保持在那里，例如 0,0。
position: relativeis placed with offset from the location it is originally placed in the browser.
position: relative放置在与它最初放置在浏览器中的位置偏移的位置。
回答by Imran Khan
position: relativeact as a parent element position: absoluteact a child of relative position. you can see the below example
位置：相对作为父元素位置：绝对作为相对位置的子元素 。你可以看到下面的例子
.postion-element{
position:relative;
width:200px;
height:200px;
background-color:green;
}
.absolute-element{
position:absolute;
top:10px;
left:10px;
background-color:blue;
}
