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

103

任何一个可以告诉我之间的差异style = "position:absolute"和style = "position:relative" 以及它们如何在不同的情况下，我把它添加到div/ span/ input元素？

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

css css-position

— 瓦伦
source

1

CSS 2.1中的'position'属性。

— Josh Lee 2010年

@rolfl嗯，对于3岁的问题，是否真的需要进行此编辑？我会称其为“太小”。

— 李斯特先生，2013年

3

@MrLister它出现在“建议的编辑”审阅队列中。...我没有注意到年龄。但是，如果这是一个60秒钟的老问题，它将有所作为吗？

— rolfl 2013年

@rolfl不是真的；我仍然会投票“太小”。

— 李斯特先生，2013年

178

绝对定位是指元素完全从页面布局的正常流程中移出。就页面上的其余元素而言，绝对定位的元素根本不存在。然后，元素本身是单独绘制的，在所有其他内容的“顶部”，在您使用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的间隙。

希望能使事情澄清一点。

— 代理难题
source

39

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

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

资源

— Premraj
source

15

您肯定会想从“ A List Apart”中检阅此定位文章。帮助揭开CSS定位的神秘色彩（在本文开始之前，这对我来说似乎很疯狂）。

— 布雷南
source

8

通过CSS定位，您可以将元素确切地放置在页面上所需的位置。

当您要使用CSS定位时，您需要做的第一件事就是使用CSS属性位置来告诉浏览器您要使用绝对定位还是相对定位。

两个职位都有不同的特征。在CSS中一旦设置了Position，就可以使用top，right，bottom，left属性。

绝对位置

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

相对位置

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

为了相对定位元素，将属性位置设置为相对。绝对位置和相对位置之间的差异在于位置的计算方式。

更多：相对位置和绝对位置

— 古里·香卡
source

6

好吧，这里的答案很明显...基本上相对位置是相对于上一个元素或窗口的，而绝对不关心其他元素，除非您使用顶部和左侧，否则它是父元素...

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

您还可以使用我为您创建的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>

展开摘要

— 阿里雷扎
source

4

绝对定位基于显示的坐标：

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

^将元素放在窗口的左上方。

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

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

^将元素向下放置1px，并从其原始位置的左侧向左放置1px :)

— 达米安·赖特
source

3

相对的：

元素position: relative;的位置相对于其正常位置。
如果您在相对元素上未添加任何定位属性（顶部，左侧，底部或右侧），则将对其位置完全没有影响。它将完全像一个position: static元素一样工作。
但是，如果您确实添加了其他定位属性，例如top：10px ;，则会将其位置从正常位置向下移10个像素。
具有这种定位类型的元素会受到其他元素的影响，并且它本身也会影响其他元素。

绝对：

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

请参阅此不言自明的示例，以获取更好的清晰度。https://codepen.io/nyctophiliac/pen/BJMqjX

— 普兰什·蒂瓦里（Pransh Tiwari）
source

0

绝对将对象（div，跨度等）放置在绝对的强制位置（通常以像素为单位），而相对对象会将其与通常放置的位置保持一定距离。例如：

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

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

— 查尔斯·辛克
source

0

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

position: relative 与原始放置在浏览器中的位置偏移。

— 邪恶无视
source

0

位置：相对充当父元素位置：绝对充当相对位置的子元素。您可以看到以下示例

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

— 伊姆兰·汗（Imran Khan）
source