style = "position:absolute“和style = "position:relative”的区别
谁能告诉我style = "position:absolute"和style = "position:relative"之间的区别，以及如果我将它添加到div/span/input元素中，它们有什么不同？
我现在正在使用absolute，但我也想探索一下relative。这将如何改变定位？
回答 10
Stack Overflow用户
发布于 2010-12-16 13:49:19
绝对定位意味着元素完全脱离了页面布局的正常流程。就页面上的其他元素而言，绝对定位的元素根本不存在。然后，元素本身被单独绘制在使用left, right, top and bottom属性指定的位置，类似于所有其他元素的“顶部”。
使用您通过这些属性指定的位置，元素将被放置在其最后一个祖先元素中的该位置，该元素的position属性不是static (如果未指定position属性，则页面元素默认为static )，或者如果不存在此类祖先元素，则放置在文档正文(浏览器视口)中。
例如，如果我有这样的代码：
<body>
<div style="position:absolute; left: 20px; top: 20px;"></div>
</body>...the <div>将位于浏览器视口顶部的20px处，以及同一视口左边缘的20px处。
但是，如果我这样做：
<div id="outer" style="position:relative">
<div id="inner" style="position:absolute; left: 20px; top: 20px;"></div>
</div>...then inner div位于outer div顶部的20px处，以及同一个div的左边缘的20px处，因为outer div没有使用position:static定位，因为我们显式地将其设置为使用position:relative。
另一方面，相对定位就像根本不声明定位，但是left, right, top and bottom属性将元素“轻推”出其正常布局。尽管如此，页面上的其余元素仍然像元素在其正常位置一样进行布局。
例如，如果我有这样的代码：
<span>Span1</span>
<span>Span2</span>
<span>Span3</span>...then所有三个<span>元素将彼此相邻，不会重叠。
如果我将第二个<span>设置为使用相对定位，如下所示：
<span>Span1</span>
<span style="position: relative; left: -5px;">Span2</span>
<span>Span3</span>...then Span2会将Span1的右侧重叠5px。Span1和Span3将坐在与第一个示例完全相同的位置，在Span2的右侧和Span3的左侧之间留下5px的间隙。
希望这能把事情说清楚一点。
Stack Overflow用户
发布于 2017-03-10 22:24:38
相对定位：元素在从视口坐标轴偏移的位置创建自己的坐标轴。它是文档流的一部分，但发生了变化。
绝对定位：元素在其父元素中搜索最近的可用坐标轴。然后，通过指定距此坐标轴的偏移量来定位元素。它将从文档正常流程中删除。
Stack Overflow用户
发布于 2010-12-16 13:51:59
你肯定会想看看“A List definitely”中的this positioning article。帮助揭开了CSS定位的神秘面纱(在本文之前，这在我看来很疯狂)。
https://stackoverflow.com/questions/4457790
复制相似问题
腾讯云开发者
