Question

任何人都可以告诉我style = "position:absolute"和style = "position:relative"之间的区别以及它们如何区别，以防我将其添加到div / span / input元素？

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

Answer 1

绝对定位意味着元素完全脱离页面布局的正常流程。就页面上的其他元素而言，绝对定位的元素根本不存在。然后，元素本身被单独绘制，在您使用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>

...然后inner div将位于距离outer div顶部20px处，距离其左边缘20px处，因为outer div不是与position:static定位，因为我们已明确将其设置为使用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的右侧重叠5px。 Span1和Span3将与第一个示例中的位置完全相同，在Span2的右侧和Span3的左侧之间留下5px的间隙。

希望能澄清一点。

Answer 2

相对定位：元素在偏离视口坐标轴的位置创建自己的坐标轴。它是文档流程的一部分，但已转移。

绝对定位：元素在其父元素中搜索最近的可用坐标轴。然后通过指定该坐标轴的偏移来定位该元素。它从文档正常流程中删除。

Source

Answer 3

你肯定想从A List Apart中查看this positioning article。帮助揭开CSS定位的神秘面纱（在本文之前，这对我来说似乎很疯狂）。

Answer 4

使用CSS定位，您可以将元素准确放置在页面上的所需位置。

当您打算使用CSS定位时，首先需要使用CSS属性位置告诉浏览器您是否要使用绝对定位或相对定位。

两个位置都有不同的功能。在Css中设置位置后，您就可以使用顶部，右侧，底部，左侧属性。

绝对位置

绝对位置元素相对于具有静态位置的第一个父元素定位。

相对位置

相对定位元素相对于其正常位置定位。

要相对定位元素，属性位置设置为相对。绝对和相对定位之间的差异是如何计算位置。

更多：Postion Relative vs Absolute

Answer 5

好的，非常明显的答案在这里...基本上相对位置是相对于前一个元素或窗口，而绝对不关心其他元素，除非它是一个父母，如果你使用顶部和左边...

查看我为您创建的示例以显示差异......

你也可以看到它在行动中，使用我为你创建的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>

Answer 6

绝对定位基于显示器的共同序列：

position:absolute;
top:0px;
left:0px;

^将元素置于窗口的左上角。

相对位置相对于元素的放置位置：

position:relative;
top:1px;
left:1px;

^将元素1px放置在距其最初所在位置左侧1px的位置：）

Answer 7

相对：

position: relative;的元素相对于其正常位置定位。
如果在相对元素上不添加任何定位属性（顶部，左侧，底部或右侧），则它根本不会影响它的定位。它的行为与position: static元素完全相同。
但是如果你确实添加了一些其他定位属性，比如top：10px;，它会将它的位置从通常的位置向下移10个像素。
具有此类定位的元素会受到其他元素的影响，并且它本身也会影响其他元素。

绝对：

position: absolute;元素允许您将任何元素准确放置在您想要的位置。您可以使用top，left，bottom定位属性。并设置位置的权利。
它相对于最近的非静态祖先放置。如果没有这样的容器，则相对于页面本身放置。
它会从页面上正常的元素流中删除。
具有此类定位的元素不受其他元素的影响，也不会影响其他元素的流动。

为了更清晰，请参阅此不言自明的示例。 https://codepen.io/nyctophiliac/pen/BJMqjX

Answer 8

绝对将对象（div，span等）置于绝对强制位置（通常以像素为单位），相对位置将其放置在远离其通常位置的位置。例如：

位置：相对;左：-20px;

如果文本的左侧距离屏幕左边20px，则可能会使文本的左侧消失。

Answer 9

position: absolute可以放在任何地方并保留在那里，例如0,0。

position: relative放置的位置偏离最初放置在浏览器中的位置。

Answer 10

位置：相对作为父元素 位置：绝对扮演相对位置的孩子。您可以看到以下示例

.postion-element{
   position:relative;
   width:200px;
   height:200px;
   background-color:green;
 }
.absolute-element{
  position:absolute;
  top:10px;
  left:10px;
  background-color:blue;
 }

style =“position：absolute”和style =“position：relative”之间的区别

10 个答案: