Question

CSS中position: relative和position: absolute之间有什么区别？什么时候应该使用哪个？

Answer 1

绝对CSS定位

position: absolute;

绝对定位是最容易理解的。您从CSS position属性开始：

position: absolute;

这告诉浏览器应该从文档的正常流程中删除要定位的内容，并将其放置在页面上的确切位置。它不会影响HTML之前或之后的元素如何定位在网页上，但将受其父母的定位影响，除非你覆盖它。

如果您想要将一个元素放置在距文档窗口顶部10个像素的位置，您可以使用top偏移量position进行absolute定位：

position: absolute;
top: 10px;

此元素将始终从页面顶部显示10px，无论内容是通过，在元素之下还是之上（视觉上）。

四个定位属性是：

top
right
bottom
left

要使用它们，您需要将它们视为偏移属性。换句话说，位于right: 2px的元素未向右移动2px。它的右侧偏离窗口的右侧（或其位置覆盖父级）2px。其他三个也是如此。

相对定位

position: relative;

相对定位使用与absolute定位相同的四个定位属性。但是，不是将元素的位置基于浏览器视图端口，而是从元素的位置开始，如果它仍然在正常的流中。

例如，如果您的网页上有三个段落，而第三个段落上放置了position: relative样式，则其位置将根据其当前位置而不是从原始位置偏移。查看端口。

第1段。

第2段。

3em

position: absolute;

注意：

绝对定位的元素的默认width是其中内容的宽度，与相对定位的元素不同，默认width为100%它可以填补的空间。
您可以使用与绝对定位元素重叠的元素，而不能使用相对定位的元素（原生地，即不使用负边距/定位）来执行此操作

批次来自：this resource

Answer 2

“相对”和“绝对”定位都是相对的，只是具有不同的框架。 “绝对”定位是相对于另一个封闭元素的位置。 “相对”定位是相对于元素本身没有定位的位置。

这取决于您使用的需求和目标。当您希望将元素从元素流中所具有的位置移位时，“相对”位置是合适的，例如，使某些字符出现在上标位置。 “绝对”定位适合于将元素放置在由另一个元素设置的某个坐标系中，例如，使用一些文字“叠印”图像。

作为一个特殊的，使用没有位移的“相对”定位（只需设置position: relative）使元素成为引用框架，这样就可以对其中的元素使用“绝对”定位（在标记）。

Answer 3

另外需要注意的是，如果您希望将绝对元素限制在父元素中，则需要将父元素的位置设置为相对。这将使子元素保持在父元素中，并且它不会成为相对的＆＃34;到整个窗口。

我写了一个blog post，它提供了一个简单的示例，可以产生以下影响：

enter image description here

它有一个绿色div，绝对位于父黄色div的底部。

1 http://blog.troygrosfield.com/2013/02/11/working-with-css-positions-creating-a-simple-progress-bar/

Answer 4

职位相对：

如果指定position：relative，则可以使用top或bottom，left或right来相对于文档中通常出现的位置移动元素。

位置绝对：

当您指定position：absolute时，该元素将从文档中删除，并准确放置在您告诉它的位置。

这是一个很好的教程http://www.barelyfitz.com/screencast/html-training/css/positioning/，其中包含两个位置的样本用法，分别用于绝对和相对定位。

Answer 5

相对：相对于它的当前位置，但可以移动。或者RELATIVE定位元素相对于ITSELF定位。

绝对： ABSOLUTE定位元素相对于IT＆＃39; S CLOSEST POSITIONED PARENT定位。如果有一个，那么它就像固定的.....相对于窗口。

<div style="position:relative"> <!--2nd parent div-->
    <div>   <!--1st parent div-->
        <div style="position:absolute;left:10px;....."> <!--Middle div-->
          Md. Arif
       </div>
    </div>
</div>

此处，第二个父div位置是相对的，因此中间div将改变它相对于第二个父div的位置。如果第一个父div位置是相对的，那么中间div将改变它相对于第一个父div的位置。 Details

Answer 6

回答，因为我的声誉不足以发表评论。但是不要把这看作是一个答案，只是一个额外的信息，就像我自己一样，在页脚和定位方面都存在一些问题。

设置页面时，我的页脚始终位于底部，位置绝对，主容器/包装器位于相对位置。

然后我发现了我的文本内容的一些问题，以及相同内容中的菜单（页眉和页脚之间的页面的白色部分），当将这些设置为绝对时，页脚不再停留。

正如你所说的那样，帖子是一个复杂的主题。

我的解决方案，对于我想要的内容，我在网页上的'绝对'位置，并没有被推到一边，在打开下拉菜单的例子中，实际上是给它相关的邮件，并把它放在35em以下我的下拉菜单。（完全扩展时，35em是我的下拉菜单的高度）

然后，Top：-35em，用于将之前的内容推到一边。然后添加margin-bottom：-35em。这样，内容在我的下拉菜单“下方”，但在视觉上它与我的下拉菜单并排！下面到页脚的白色空间只有10em边距，因为它是在开始玩这个之前。所以我对此的解决方案是这样的：

 html, body {
    margin:0;
    padding:0;
    height:100%;

}
h1 {
    margin:0;
}
    #webpage {
    position:relative;
    min-height:100%;
    margin:0;
    overflow:auto;
}
     #header {
    height:5em;
    width:100%;
    padding:0;
    margin:0;
}
     #text {
    position:relative;
   margin-bottom:-32em;
    padding-top:2em;
    padding-right:2em;
    padding-bottom:10em;
    background-repeat:no-repeat;
    width:70%;
    padding-left:auto;
    margin-left:auto;
    margin-right:auto;
    right:10em;
    float:right;
    top:-32em;
      }
#dropdown {

position:absolute;
    left:0;
    width:20%;
    clear:both;
    display:block;
    position:relative;
    top:1em;
    height:35em;

}
    #footer {
    position:absolute;
    width:100%;
    right:0;
    bottom:0;
    height:5em;
    margin:0;
     margin-top:5em;
}

我看到你的问题得到了很好的回答，但经过多次麻烦后我发现这是一个非常好的解决方案，并且是一种更好地理解定位如何工作的方法。当我放置文本内容时，在我的下拉菜单下方，它不会将我的文本推到一边。如果我将文本更改为绝对位置，则页脚不会保留在原位。我可以相信这对我来说是一个更多人的问题，我在这里补充一下。实际上发生的事情是，我把文字35张放在我的下拉之下。

然后，我在视觉上把它放在彼此旁边，相对位置，顶部：-35em;，然后在下面的巨大空间中傍晚，边缘：-35em;

当人们更好地理解这些位置时，有时会低估负值，非常好的功能！

天然，固定位置，对我的页脚来说似乎也是逻辑，但如果文本或内容比视口长，我确实希望页脚位于视口下方。如果页面上的内容很少，请保持在最底层。

这个setupp很好地修复了，并且记得使用'em'，而不是'px'来获得更流畅/动态的页面布局！：）

（可能有更好的解决方案，但这适用于跨平台和设备）。

Answer 7

让我们讨论一个场景，解释绝对与相对之间的差异。

在body元素中说您有一个header元素，其高度是viewheight的95％，即95vh。在此容器中放置了图像，并将其不透明度降低为0.5。现在，您想在左上角附近放置徽标图像。希望您能理解这种情况。因此，标题部分的图像会更亮，并且在指定位置的顶部带有徽标。

但是在开始之前，我已经像这样设置了边距和填充为

*{
   margin:0px;
   padding:0px;
   box-sizing: border-box; 
}

这可确保没有默认的边距和填充应用于元素。

因此您可以通过两种方式实现您的要求。

第一条路

您给图像上一个类，例如徽标。
在CSS中编写

.logo{ float:left; margin-top:40px; margin-left:40px; }
这会将徽标放置在与父标题（顶部）左上角40像素之间。图像将显示为如所需放置的样子。

但是我的朋友这是一个不好的设计，因为当不需要时，通过留出一定的余量来放置您不必要地占用大量空间的图像。您所需要做的就是将图像放置到该位置。您通过用边距缓冲来管理它。边距占用了空间，并将其内容推得更深，给人的印象是它正好位于您想要的位置。希望您通过像这样解决它来理解该问题。您所占用的空间超出了仅将图像放置在所需位置所需的空间。

现在让我们尝试另一种方法。

第二种方式

带有徽标类的图像位于带有标题类的标题元素内。因此父类是标头，子类是徽标。
您将标题类的position属性设置为相对的

.header{ position: relative; }
然后将以下属性添加到徽标类

.logo{ position:absolute; top:40px; left:40px }

你去了。您将图像放置在完全相同的位置。在第一种方法和第二种方法之间，从肉眼看，定位不会有任何明显的区别。但是，如果您检查image元素，您会发现它没有占用任何多余的空间。它占用的宽度和高度完全相同。

那怎么可能呢？我对图像徽标类说过，您将被放置到标头类中是 relative ，因为您是此类的子级，我特别提到了它的位置是 relative 。这样它的任何子项都将相对于它的左上角放置。而且您的位置需要在此父元素内固定。因此您会得到绝对。而且，您需要从顶部和左侧稍微移到我想要的位置。因此，您将获得top和left属性，其值为40px。这样，您将仅相对于您的父母。因此，如果明天我将您的父母向上或向下移动或在任何位置移动，您将始终是父母头标左上角的顶部和左侧40px。因此，无论您的父母将来的职位是否固定，您的职位都在父母内部固定（因为这不是像您一样的绝对职位）。

因此，分别对父级和子级使用相对和绝对值。其次，当您只想将子元素放置在其父元素内的某个位置时，可以使用它。请勿使用边缘等填充物强行推动它。给出您要移动的父级相对值和子级的绝对值。为子类指定top，left，bottom或right属性，以将其放置在父类中所需的任何位置。

谢谢。

Answer 8

相对vs绝对：

差异：：相对于自身，相对于最接近的祖先。
差异：围绕它的其他元素尊重它的旧存在，而围绕它的其他元素则不尊重它的旧存在。
相似性：它周围的其他元素不尊重其新的存在，周围的其他元素也不尊重其新的存在。

Answer 9

Marco Pellicciotta：元素在另一个元素中的位置可以是相对的或绝对的，关于它内部的元素。

如果您需要在浏览器窗口的角度定位元素，最好使用position：fixed

Answer 10

绝对会将元素从流布局中移出，并将其放置到最接近的相对父级（默认情况下，所有父级都是静态的）。这就是您大多数时候同时使用绝对和相对的方式。

您也可以单独使用“相对”，但这是极少数情况。

我拍了一段视频来解释这一点。

https://www.youtube.com/watch?v=nGN5CohGVTI

位置相对与绝对？

10 个答案: