风格=“位置:绝对"之间的区别和样式=“位置:相对"； [英] Difference between style = "position:absolute" and style = "position:relative"
问题描述
谁能告诉我 style = "position:absolute" 和 style = "position:relative" 之间的区别，以及它们在我添加到的情况下有何不同div/span/input 元素?
我现在正在使用 absolute，但我也想探索 relative.这将如何改变定位?
绝对定位是指元素完全脱离了页面布局的正常流程.就页面上的其余元素而言，绝对定位的元素根本不存在.然后元素本身被单独绘制，在你使用 left、right、top 和 bottom 属性指定的位置上，有点像其他所有东西的顶部".
使用您通过这些属性指定的位置，然后将该元素放置在其最后一个祖先元素中的该位置，该元素具有除 static 以外的任何位置属性(页面元素默认为 static，当没有指定的位置属性)，如果不存在这样的祖先，则为文档正文(浏览器视口).
例如，如果我有这个代码:
<div style="position:absolute; left: 20px; top: 20px;"></div>...<div> 将位于距浏览器视口顶部 20 像素的位置，距其左边缘 20 像素.
但是，如果我这样做:
<div id="inner" style="position:absolute; left: 20px; top: 20px;"></div>...那么 inner div 将位于距离 outer div 顶部 20px 的位置，距离相同的左边缘 20px，因为 外部 div 未使用position:static 定位，因为我们已明确将其设置为使用position:relative.
另一方面，相对定位就像根本不声明定位，但是left, right, top and bottom 属性将元素轻推"到了它们的正常布局之外.页面上的其余元素仍然按照元素在其正常位置的方式进行布局.
例如，如果我有这个代码:
Span1<span>Span2</span><span>Span3</span>...然后所有三个 元素将彼此相邻而不会重叠.
如果我将第二个 设置为使用相对定位，如下所示:
Span1<span style="position: relative; left: -5px;">Span2</span><span>Span3</span>...那么 Span2 将与 Span1 的右侧重叠 5px.Span1 和 Span3 将位于与第一个示例中完全相同的位置，在 Span2 的右侧和 Span3 的左侧之间留出 5px 的间隙.
希望能澄清一点.
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?
I am using absolute right now, but I want to explore relative as well. How will this change the positioning?
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.
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.
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.
Hope that clarifies things a bit.
这篇关于风格=“位置:绝对"之间的区别和样式=“位置:相对"；的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
