样式=“位置：绝对”和样式=“位置：相对”之间的区别

贺福

2023-03-14

问题内容：

谁能告诉我和之间的区别，style = "position:absolute"以及style = "position:relative"
在我将其添加到div/ span/ input元素时它们之间的区别是什么？

我现在正在使用absolute，但是我也想探索relative。这将如何改变定位？

问题答案：

绝对定位是指元素完全从页面布局的正常流程中移出。就页面上的其余元素而言，绝对定位的元素根本不存在。然后，在您使用left, right, top and bottom属性指定的位置，元素本身被单独绘制，在所有其他内容的“顶部” 。

使用您使用这些属性指定的位置，该元素将被放置在其最后一个祖先元素中的那个位置，该元素的位置属性不是static（（未指定位置属性时的页面元素默认为静态））或文档正文（浏览器）视口）（如果不存在这样的祖先）。

例如，如果我有以下代码：

<body>
  <div style="position:absolute; left: 20px; top: 20px;"></div>
</body>

… <div>应位于距浏览器视口顶部20px处，距浏览器左边缘20px处。

但是，如果我做了这样的事情：

 <div id="outer" style="position:relative">
   <div id="inner" style="position:absolute; left: 20px; top: 20px;"></div>
 </div>

…然后将innerdiv从outerdiv 的顶部定位20px，从其顶部向左定位20px
，因为outerdiv的定位位置不是position:static因为我们已将其明确设置为use position:relative。

另一方面，相对定位就像根本不声明任何定位一样，但是left, right, top and bottom属性将元素“推”出了其正常布局。页面上的其余元素仍然会布局，就像该元素位于其正常位置一样。

例如，如果我有以下代码：

<span>Span1</span>
<span>Span2</span>
<span>Span3</span>

…然后这三个<span>元素将彼此相邻而不会重叠。

如果我将第二个设置<span>为使用相对定位，如下所示：

<span>Span1</span>
<span style="position: relative; left: -5px;">Span2</span>
<span>Span3</span>

…那么Span2将与Span1的右侧重叠5像素。Span1和Span3与第一个示例位于完全相同的位置，在Span2的右侧和Span3的左侧之间留有5px的间隙。

希望这能使事情澄清一点。