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/input elements?
有谁能告诉我style = "position:absolute"和style = "position:relative"之间的区别吗?
I am using absolute right now, but I want to explore relative as well. How will this change the positioning?
我现在正在使用绝对，但我也想探索相对。这将如何改变定位?
10 个解决方案
#1
124
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 bottom attributes.
绝对定位是指元素完全脱离页面布局的正常流。就页面上的其他元素而言，绝对定位的元素根本不存在。然后，元素本身被单独绘制，在其他所有东西上都是“on top”，在您指定的位置上，您可以使用左、右、顶部和底部的属性。
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.
使用您所指定的位置和这些属性,然后放在那个位置元素在其最后一个祖先元素的位置属性不是静态的页面元素(默认为静态时没有指定位置属性),或文档主体(浏览器窗口)如果没有这样的祖先的存在。
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.
…
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 inner div would be positioned 20px from the top of the outer div, and 20px from the left edge of same, because the outer div isn't positioned with position:static because we've explicitly set it to use position:relative.
…然后内部div会从外部div的顶部定位20px，从左边缘定位20px，因为外部div没有使用position:static，因为我们已经明确地将它设置为position:relative。
Relative positioning, on the other hand, is just like stating no positioning at all, but the left, right, top and bottom attributes "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.
另一方面，相对定位就像完全不声明任何位置一样，但是左、右、顶和底属性会将元素“推”出常规布局。页面上的其他元素仍然被显示出来，就好像元素在它的正常位置一样。
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.
…然后，所有三个元素将彼此相邻而不重叠。
If I set the second <span> to use relative positioning, like this:
如果我将第二个设置为使用相对定位，如下所示:
<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.
希望能澄清一点。
#2
13
You'll definitely want to check out this positioning article from A List Apart. Helped demystify CSS positioning (which seemed insane to me, prior to this article).
您肯定想要从列表中单独查看这篇定位文章。帮助揭开CSS定位的神秘面纱(在本文之前，这对我来说简直太疯狂了)。
#3
12
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 removed from document normal flow.
绝对位置:元素搜索其父元素之间最近的可用坐标轴。然后通过指定坐标轴的偏移量来定位元素。它从文档正常流中删除。
源
#4
4
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属性位置来告诉浏览器你要使用绝对定位还是相对定位。
Both Postion are having different features.In Css Once you set Position then you can able to use top,right,bottom,left attributes.
两个职位都有不同的特点。在Css中，一旦你设置了位置，你就可以使用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
更多:相对位置与绝对位置
#5
2
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 :)
^地方元素1 px下来1 px从它最初的左边坐:)
#6
1
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属性位置来告诉浏览器你要使用绝对定位还是相对定位。
Both Postion are having different features.In Css Once you set Position then you can able to use top,right,bottom,left attributes.
两个职位都有不同的特点。在Css中，一旦你设置了位置，你就可以使用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.
要相对地定位一个元素，属性位置被设置为相对的。绝对和相对定位的区别是如何计算这个位置。
#7
1
OK, very obvious answer here... basically relative position is relative to previous element or window, while absolute don'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>#8
1
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 like 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.
但是如果你添加一些其他的定位属性，比如top: 10px;它会将位置从正常位置向下移动10像素。
-
An element with this type of positioning gets affected by other elements and it itself also affects others.
具有这种类型的定位的元素会受到其他元素的影响，它本身也会影响其他元素。
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.
具有此类定位的元素不受其他元素的影响，也不影响其他元素的流。
See this self-explanatory example for better clarity. https://codepen.io/nyctophiliac/pen/BJMqjX
请参见这个不言自明的示例，以获得更好的清晰度。https://codepen.io/nyctophiliac/pen/BJMqjX
#9
0
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:
绝对位置将对象(div, span等)放置在一个绝对强制位置(通常以像素为单位)，相对位置将使其与通常的位置有一定的距离。例如:
position:relative; left:-20px;
位置:相对;左:-20 px;
Might make the left side of the text disappear if it was within 20px to the left edge of the screen.
如果文本在屏幕左边缘20px以内，可能会使文本左侧消失。
#10
0
position: absolute can be placed anywhere and remain there such as 0,0.
位置:绝对可以放置在任何位置，并保持在那里，例如0,0。
position: relative is placed with offset from the location it is originally placed in the browser.
位置:相对位置被放置在浏览器的位置偏移位置。
#1
124
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 bottom attributes.
绝对定位是指元素完全脱离页面布局的正常流。就页面上的其他元素而言，绝对定位的元素根本不存在。然后，元素本身被单独绘制，在其他所有东西上都是“on top”，在您指定的位置上，您可以使用左、右、顶部和底部的属性。
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.
使用您所指定的位置和这些属性,然后放在那个位置元素在其最后一个祖先元素的位置属性不是静态的页面元素(默认为静态时没有指定位置属性),或文档主体(浏览器窗口)如果没有这样的祖先的存在。
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.
…
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 inner div would be positioned 20px from the top of the outer div, and 20px from the left edge of same, because the outer div isn't positioned with position:static because we've explicitly set it to use position:relative.
…然后内部div会从外部div的顶部定位20px，从左边缘定位20px，因为外部div没有使用position:static，因为我们已经明确地将它设置为position:relative。
Relative positioning, on the other hand, is just like stating no positioning at all, but the left, right, top and bottom attributes "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.
另一方面，相对定位就像完全不声明任何位置一样，但是左、右、顶和底属性会将元素“推”出常规布局。页面上的其他元素仍然被显示出来，就好像元素在它的正常位置一样。
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.
…然后，所有三个元素将彼此相邻而不重叠。
If I set the second <span> to use relative positioning, like this:
如果我将第二个设置为使用相对定位，如下所示:
<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.
希望能澄清一点。
#2
13
You'll definitely want to check out this positioning article from A List Apart. Helped demystify CSS positioning (which seemed insane to me, prior to this article).
您肯定想要从列表中单独查看这篇定位文章。帮助揭开CSS定位的神秘面纱(在本文之前，这对我来说简直太疯狂了)。
#3
12
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 removed from document normal flow.
绝对位置:元素搜索其父元素之间最近的可用坐标轴。然后通过指定坐标轴的偏移量来定位元素。它从文档正常流中删除。
源
#4
4
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属性位置来告诉浏览器你要使用绝对定位还是相对定位。
Both Postion are having different features.In Css Once you set Position then you can able to use top,right,bottom,left attributes.
两个职位都有不同的特点。在Css中，一旦你设置了位置，你就可以使用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
更多:相对位置与绝对位置
#5
2
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 :)
^地方元素1 px下来1 px从它最初的左边坐:)
#6
1
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属性位置来告诉浏览器你要使用绝对定位还是相对定位。
Both Postion are having different features.In Css Once you set Position then you can able to use top,right,bottom,left attributes.
两个职位都有不同的特点。在Css中，一旦你设置了位置，你就可以使用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.
要相对地定位一个元素，属性位置被设置为相对的。绝对和相对定位的区别是如何计算这个位置。
#7
1
OK, very obvious answer here... basically relative position is relative to previous element or window, while absolute don'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>#8
1
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 like 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.
但是如果你添加一些其他的定位属性，比如top: 10px;它会将位置从正常位置向下移动10像素。
-
An element with this type of positioning gets affected by other elements and it itself also affects others.
具有这种类型的定位的元素会受到其他元素的影响，它本身也会影响其他元素。
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.
具有此类定位的元素不受其他元素的影响，也不影响其他元素的流。
See this self-explanatory example for better clarity. https://codepen.io/nyctophiliac/pen/BJMqjX
请参见这个不言自明的示例，以获得更好的清晰度。https://codepen.io/nyctophiliac/pen/BJMqjX
#9
0
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:
绝对位置将对象(div, span等)放置在一个绝对强制位置(通常以像素为单位)，相对位置将使其与通常的位置有一定的距离。例如:
position:relative; left:-20px;
位置:相对;左:-20 px;
Might make the left side of the text disappear if it was within 20px to the left edge of the screen.
如果文本在屏幕左边缘20px以内，可能会使文本左侧消失。
#10
0
position: absolute can be placed anywhere and remain there such as 0,0.
位置:绝对可以放置在任何位置，并保持在那里，例如0,0。
position: relative is placed with offset from the location it is originally placed in the browser.
位置:相对位置被放置在浏览器的位置偏移位置。