相对位置还是绝对位置？

position: relative和position: absoluteCSS 和有什么不一样？以及什么时候应该使用？

CSS绝对定位

position: absolute;

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

position: absolute;

这告诉浏览器应将要定位的所有内容从正常文档流中删除，并将其放置在页面上的确切位置。它不会影响HTML中它之前或之后的元素在网页上的放置方式，但是除非您重写它，否则它将取决于它在父级中的位置。

如果你想一个元素从文档窗口的顶部10个像素的位置，你会使用top偏移position与它有absolute定位：

position: absolute;
top: 10px;

然后10px，无论在元素上方，下方还是上方（通过视觉方式）通过的内容，该元素始终始终从页面顶部显示。

四个定位属性是：

1. top
2. right
3. bottom
4. left

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

相对定位

position: relative;

相对定位使用与定位相同的四个定位属性absolute。但是，不是将元素的位置基于浏览器查看端口，而是从元素仍处于正常流中的位置开始。

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

第1段

第2段

笔记：

• 默认width的是绝对定位的元素的是在其中的内容的宽度，不同于被相对定位在那里它的默认的元素width是100%该空间也可以填充的。

• 您可以将元素与绝对定位的元素重叠，而不能对相对定位的元素进行重叠（本机，即不使用负边距/定位）

大量资源： 此资源

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

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

作为一种特殊方法，使用无位移的“相对”定位（只需设置position: relative）将一个元素作为参考框架，以便可以对其中的元素（在标记中）使用“绝对”定位。

要注意的另一件事是，如果要将绝对元素限制为父元素，则需要将父元素的位置设置为相对。这样会将子元素保留在父元素内，并且不会“相对”整个窗口。

我写了一篇博客文章，给出了一个简单的示例，该示例产生了以下影响：

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

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

相对职位：

如果指定position：relative，则可以使用上或下，左或右将元素相对于文档中通常会出现的位置移动。

绝对位置：

当您指定position：absolute时，该元素将从文档中删除，并精确地放置在您要指示的位置。

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

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

绝对：相对于IT的最近定位父对象定位绝对定位的元素。如果存在，则相对于窗口，它的作用就像是固定的。

<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。如果1st parent div位置是相对位置，那么Middle div相对于1st parent会改变位置div。细节

给出答案，因为我的声誉不足以发表评论。但是，不要将其视为答案，就我个人而言，只是附加信息在页脚和定位方面都存在一些问题。

设置页面时，请确保页脚始终位于底部，绝对位置，而主容器/包装机具有相对位置。

然后，我发现文本内容和同一内容（页眉和页脚之间的页面的白色部分）中的菜单存在一些问题，将它们设置为绝对值后，页脚不再停留。

正如您所说的那样，职位划分是一个复杂的主题。

我的解决方案是针对我想要的网页上“绝对”位置中的内容，而不是偏向一侧，例如在打开下拉菜单时，实际上是赋予其相对位置，并将其放置在下拉菜单下方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;
}

我看到您的问题得到了很好的回答，但是经过很多麻烦之后，我发现这是一个很好的解决方案，并且是一种更好地了解定位方式的方法。当我将文本内容放在下拉菜单下方时，它不会不要把我的文字推到一边。如果我将文本更改为绝对位置，则页脚不会停留在原处。因为我可以相信这对我来说是更多人的问题，所以我在这里添加。实际上发生的是，我将文本35ems放在下拉菜单下方。

然后，我在视觉上将其放置在彼此相对的位置，位置相对，顶部居高：-35em；然后将下面的巨大空间平整，边距：-35em;

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

通常，固定位置对于我的页脚来说似乎也是合乎逻辑的，但是如果文本或内容的长度大于视口，我确实希望页脚位于视口下方。如果页面上的内容很少，请停留在底部。

此setupp很好地解决了该问题，并记住使用'em'而不是'px'以获得更流畅/动态的页面布局！:)

（也许有更好的解决方案，但这对我来说适用于跨平台以及跨设备）。

相对vs绝对：

• 差异：相对于自身，相对于最接近的祖先。
• 区别：它周围的其他元素尊重它的旧存在，周围的其他元素则不尊重它的旧存在。
• 相似之处：它周围的其他元素不尊重其新的存在，它周围的其他元素不尊重其新的存在。

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

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

但是在开始之前，我已经将margin和padding设置为0

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

这样可以确保没有默认的边距，也不会将填充应用于元素。

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

第一路

• 您给图像说徽标一个类。

• 在CSS中你写

  .logo{ float:left; margin-top:40px; margin-left:40px; }

• 这会将徽标放到父标题（顶部）的顶部和左侧40px处。图像将显示为如所需放置的样子。

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

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

第二路

• 带有徽标类的图像位于带有标题类的标题元素内。因此，父类是标头，子类是徽标。

• 您可以将标头类的position属性设置为相对

  .header{ position: relative; }

• 然后将以下属性添加到徽标类

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

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

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

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

谢谢。

Marco Pellicciotta：元素在另一个元素内的位置可以相对于元素内部是相对还是绝对的。

如果您需要将元素放置在浏览器窗口的角度上，则最好使用position：fixed