163

position: relativeCSS和CSS有什么区别position: absolute？什么时候应该使用它们？

4

10 回答 10

169

绝对 CSS 定位

position: absolute;

绝对定位是最容易理解的。你从 CSSposition属性开始：

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 段。

第 3 段。

在上面的示例中，第三段将从3em容器元素的左侧开始定位，但仍位于前两段的下方。它将保留在文档的正常流程中，只是略微偏移。如果您将其更改为 ，则它position: absolute;后面的任何内容都会显示在它的顶部，因为它将不再处于文档的正常流程中。

笔记：

  • width绝对定位的元素的默认值是其中内容的宽度，与相对定位的元素不同，它的默认值是width它100%可以填充的空间。

  • 您可以拥有与绝对定位元素重叠的元素，而您不能对相对定位的元素执行此操作（本机即不使用负边距/定位）

大量来自： 此资源

于 2012-05-03T06:57:02.673 回答
55

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

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

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

于 2012-05-03T07:09:41.980 回答
22

要注意的另一件事是，如果您希望将绝对元素限制在父元素中，则需要将父元素的位置设置为相对。这将使子元素包含在父元素中，并且它不会与整个窗口“相对”。

我写了一篇博文，给出了一个简单的例子，它产生了以下影响：

在此处输入图像描述

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

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

于 2013-02-12T18:27:01.933 回答
19

相对位置：

如果您指定 position:relative，那么您可以使用 top 或 bottom 以及 left 或 right 来相对于它通常在文档中出现的位置移动元素。

绝对位置：

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

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

于 2012-05-03T06:54:48.953 回答
13

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

Absolute ：绝对定位元素相对于它的最近定位的父元素定位。如果存在，那么它的工作方式就像固定......相对于窗口。

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

在这里， 2nd parentdiv位置是相对的，所以中间div会改变它相对于 2nd parent 的位置div。如果第一个父div位置是相对的，那么 Middlediv将改变它相对于 1st parent 的位置div。细节

于 2016-05-25T17:12:03.980 回答
2

给出答案，因为我的声誉不足以评论。但是不要将此视为答案，只是一个附加信息，就像我自己一样，在页脚和定位方面都有一些问题。

设置页面时，使我的页脚始终保持在底部，具有绝对位置，而主容器/包装器具有相对位置。

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

正如您所说，定位是一个复杂的主题。

我的解决方案，对于我想要在网页中“绝对”位置的内容，而不是被推到一边，例如打开下拉菜单时，实际上是给它相对位置，并将它放在我的下拉菜单下方 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;
}

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

然后，我在视觉上把它放在彼此旁边，相对位置，top:-35em;，然后平衡下面的巨大空间，margin:-35em;

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

自然，固定位置对于我的页脚来说似乎也是逻辑的，但我确实希望页脚低于视口，如果文本或内容比视口长。并留在底部，如果页面上的内容很少。

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

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

于 2015-01-29T07:03:03.803 回答
2

相对与绝对：

  • 区别：相对于自身，相对于最近的定位祖先。
  • 区别：它周围的其他元素尊重它的旧存在，它周围的其他元素不尊重它的旧存在。
  • 相似性：它周围的其他元素不尊重它的新存在，它周围的其他元素不尊重它的新存在。
于 2019-03-23T17:53:53.153 回答
1

让我们讨论一个场景来解释绝对与相对之间的区别。

在 body 元素内部，假设您有一个 header 元素，其高度是 viewheight 的 95%，即 95vh。在这个容器中，您放置了一个图像并将其不透明度降低到 0.5。现在您想在左上角附近放置一个徽标图像。我希望你理解这个场景。因此，您将在标题部分有一个较轻的图像，并在其顶部的指定位置有一个徽标。

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

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

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

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

第一种方式

  • 你给图像一个类说标志。

  • 在你写的CSS中

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

  • 这将徽标放置在距作为标题的封闭父级的顶部和左侧 40 像素处。图像将显示为根据需要放置。

但是我的朋友，这是一个糟糕的设计，因为在不需要时给它一些边距来放置一个你不必要地消耗大量空间的图像。您所需要的只是将图像放置到该位置。你通过用边距来缓冲它来管理它。边距占据了空间并将其内容推得更深，给人的印象是它恰好位于您想要的位置。希望您通过像这样解决问题来理解这个问题。您占用的空间比仅在所需位置放置图像所需的空间多。

现在让我们尝试不同的方法。

第二种方式

  • 带有徽标类的图像位于带有标题类的标题元素内。所以父类是header，子类是logo。

  • 您将标头类的位置属性设置为相对像这样

    .header{ position: relative; }

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

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

你去吧。您将图像放置在完全相同的位置。第一种方法和第二种方法之间的肉眼定位不会有任何明显差异。但是如果你检查 image element ，你会发现它并没有占用任何额外的空间。它占据的面积与它自己的宽度和高度完全相同。

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

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

谢谢。

于 2018-06-22T07:03:36.273 回答
0

Absolute 将使您的元素脱离流布局，并将定位到最近的相对父级（默认情况下，所有父级都是静态的）。这就是您在大多数情况下同时使用绝对和相对的方式。

您也可以单独使用 relative，但这种情况非常罕见。

我制作了一个视频来解释这一点。

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

于 2020-08-07T00:52:36.153 回答
0
  • 静态：默认/无效果
  • 相对：从位于 html 布局中的正常位置开始生效。
  • Absolute：对父 Div/Box 有效。

下面的图片会给你一个清晰的想法

在此处输入图像描述

于 2022-01-22T19:12:01.683 回答