logo标签列表

相对定位和绝对定位的区别？

css
173

position: relative和position: absolute在CSS中有什么区别？何时应该使用它们？

3
我提供了一些详细的解释在这里，说明它们是如何工作的。 - Mr. Alien
w3schools教程 对于定位属性的解释非常清晰明了。 - gnsb
1
相对定位元素的位置相对于其正常位置。绝对定位元素相对于具有绝对或相对定位的第一个父容器而言。这里有一篇很棒的文章https://kolosek.com/css-position-relative-vs-position-absolute详细解释了相对和绝对定位。 - Nesha Zoric
但是如果top，right，bottom和left没有指定呢？ - pseudosudo
10个回答
174

绝对定位的CSS

position: absolute;

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

position: absolute;

这会告诉浏览器，无论要定位的内容是什么，都应该从文档的正常流中移除，并在页面上精确放置。它不会影响 HTML 中在其之前或之后定位的元素在 Web 页面上的位置，但是除非你覆盖它，否则它将受到其父级定位的影响。

如果您想将元素与文档窗口顶部相距10像素，您可以使用绝对定位的top偏移将其定位到那里：

position: absolute;
top: 10px;

无论元素下方、上方或穿过什么内容，此元素始终会距页面顶部10px（在视觉上）。

四个定位属性是：

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

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

相对定位

position: relative;

相对定位使用与absolute定位相同的四个定位属性。但其位置不是基于浏览器视口，而是从该元素仍在正常流程中的位置开始。

例如，如果您的网页上有三段落，第三段落有一个position: relative样式，那么它的位置将基于其当前位置进行偏移-而不是基于视口原始边缘。

第一段。

第二段。

第三段。

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

注意：

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

  • 您可以有与绝对定位的元素重叠的元素，而不能使用相对定位的元素（原生地即不使用负边距/定位）。

参考来源：this resource

169
关于绝对定位的说法有误导性。采用绝对定位的元素将相对于具有相对或绝对定位的第一个父元素进行定位，这可能是最外层元素（<html>），也可能不是。这完全取决于包含绝对定位元素的项目。另一个重要区别在于，绝对定位的元素会从正常文档流中移除，而相对定位的元素则不会。因此，如果您有三个重叠的<div>，并将其中一个设置为绝对定位，则顶部和底部的<div>将会合并在一起。 - d512
11
@user1334007，你说得非常正确，由于我现在太喝醉了，所以请随意编辑我的帖子。 - Michael Zaporozhets
@user1334007，是的，我不能接受评论或其他什么，但为了解决你提出的一些问题，今晚我会自己进行一些编辑。我以非常随意的方式解释事情，因为这样可以避免过于“教科书式”，但是我同意内容应尽可能准确。 - Michael Zaporozhets
2
这个答案没有表达清楚的是：position: absolute; 是相对于最近的已定位祖先元素定位的。 - Sava Jcript
58

“相对定位”和“绝对定位”都是相对的，只是使用了不同的参照系。 “绝对定位”是相对于另一个包含元素的位置而言的。而“相对定位”是相对于元素本身没有定位时所在的位置而言的。

使用哪种定位方式取决于您的需求和目标。“相对定位”适用于将元素从元素流中原来的位置移开的情况，例如使某些字符出现在上标位置。“绝对定位”适用于将元素放置在由其他元素设置的坐标系统中的情况，例如在图像上“打印”一些文本。

特别地，使用没有位移的“相对定位”（只需设置position: relative）来使元素成为参考框架，以便您可以在其中包含“绝对定位”的元素（在标记中）。

相对定位是相对于元素本身没有定位时的位置。元素没有定位时默认为“静态”，而不是相对定位。 - kittu
23
5
父元素需要是“非静态”的-因此父元素可以是相对的、绝对的等等......使用相对于父元素的位置，优点在于它不会从文档中移除元素。 - Fernando
21

相对定位：

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

绝对定位：

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

这些内容来自 http://www.barelyfitz.com/screencast/html-training/css/positioning/，并附带了绝对和相对定位的示例用法。

14

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

绝对定位：绝对定位元素相对于其最近的已定位祖先元素进行定位。如果存在，则像fixed一样相对于窗口。

<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更改其位置。详情请见

2

由于我的声望不够，无法评论，因此我将提供答案。但请不要将其视为答案，只是额外的信息，因为我自己在页脚和定位方面遇到了一些问题。

当设置页面时，使我的页脚始终保持在底部，使用绝对位置，并使用相对位置设置主容器/包装器时，我发现文本内容和菜单内的某些问题（页面上白色部分，介于页眉和页脚之间），当将它们设置为绝对位置时，页脚不再保持在下方。

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

我的解决方案是：将我想要放置在网页中“绝对”位置的内容设为相对位置，并将其放置在距离下拉菜单下方35em的位置。（35em是我的下拉菜单完全展开时的高度）

然后，将上边距设为-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处。
然后，我使用相对定位将其可视化并使其紧贴在一起，使用top:-35em;，并通过margin:-35em;来减小底部巨大的空间。
负值有时被低估，当我们更好地理解这些位置时，它们具有非常好的功能！
自然而然，固定位置对于我的页脚也是合理的，但如果文本或内容比视口长，则我确实希望页脚在视口下方，并且如果页面上的内容很少，则保持在底部。
这个设置非常好地解决了这个问题，并记得使用“em”而不是“px”，以获得更流畅/动态的页面布局！ :)
（可能有更好的解决方案，但这对我来说在跨平台和设备上都有效）。
2

相对定位 vs 绝对定位：

  • 区别：相对于自身，相对于最近的已定位祖先。
  • 区别：周围的其他元素会遵守其旧存在，周围的其他元素不会遵守其旧存在。
  • 相似点：周围的其他元素不会遵守其新存在，周围的其他元素不会遵守其新存在。

最初的回答

  • 相对定位 vs 绝对定位：相对定位是相对于元素自身进行定位，而绝对定位则是相对于最近的已定位祖先进行定位。
  • 两者之间的区别：当元素使用相对定位时，周围的其他元素仍然会遵守其旧位置，而当元素使用绝对定位时，周围的其他元素将不再考虑其旧位置。
  • 共同点：在使用相对或绝对定位时，周围的其他元素都不会考虑元素的新位置。
1
让我们讨论一个场景，以解释绝对定位与相对定位之间的区别。
在body元素内部，假设您有一个标题元素，其高度为视窗高度的95％，即95vh。在此容器中，您放置了一张图像并将其不透明度降低到0.5。现在，您想在左上角附近放置一个徽标图像。我希望您已经理解了这个场景。因此，您将在标题部分拥有一个较浅的图像，并在指定位置顶部放置徽标。
但在开始之前，我将把margin和padding设置为0，就像这样：
*{
   margin:0px;
   padding:0px;
   box-sizing: border-box; 
}

这样可以确保元素不会应用默认的边距和填充。
因此，您有两种方法可以实现您的要求。
第一种方法：
- 您为图像命名一个类，比如说logo。 - 在CSS中编写以下内容：
``` .logo{ float:left; margin-top:40px; margin-left:40px; } ```
这将把logo放置在包含它的父元素头部的顶部和左侧40个像素位置。图像将显示为所需位置。
但是，这种设计并不好，因为为了放置图像，您不必要地占用了很多空间，通过给它一些边距来缓冲它周围。边距占用了空间并将其内容推得更深，给人一种它被定位在所需位置的印象。希望您通过这种方式理解了问题。您正在占用比所需更多的空间，仅仅为了将一个图像放置在所需位置。
现在让我们尝试另一种方法。
第二种方法：
  • 具有logo类的图像位于具有header类的头元素内。因此，父类是header，子类仍然是logo。

  • 您可以将header类的position属性设置为relative，如下所示：

    .header{ position: relative; }

  • 然后，您向logo类添加了以下属性：

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

这样就完成了。您将图像放置在完全相同的位置。从肉眼观察，第一种方法和第二种方法之间的定位没有任何明显的差异。但是，如果您检查图像元素，则会发现它没有占用任何额外的空间。它占用的区域正好与其自身的宽度和高度相同。

所以这是怎么实现的？我告诉图像logo类，你将被放置在头部类的相对位置，因为你是该类的子类，并且我特别提到了它的位置是相对的。因此，它的任何子元素都将相对于其左上角定位。而你的位置需要固定在父元素内，所以你被赋予绝对值。你需要从顶部和左侧稍微移动到我想要的位置，因此你被赋予了top和left属性，值为40px。通过这种方式，你将仅相对于你的父元素放置。因此，如果明天我将你的父元素向上或向下移动或只是任何地方，你始终会在父标题的左上角的左上角40px处。因此，无论您的父级未来是否固定（因为它不像您那样是绝对的），您的位置都在父级内固定。
因此，对于父级和子级分别使用相对和绝对。其次，当您只想将子元素放置在其父元素中的某个位置时，请使用它。不要使用填充器强制推动它。给父元素相对值，给你想要移动的子元素绝对值。指定顶部、左侧、底部或右侧属性以将其放置在父元素内的任何位置。
谢谢。
0
  • 静态: 默认/无效果
  • 相对: 从正常位置开始生效，位置在html布局中。
  • 绝对: 相对于父Div / Box生效。

下面的图片将为您提供清晰的想法

enter image description here

0

absolute 可以使你的元素脱离流式布局，并且定位到最近的相对定位父级（所有父级默认情况下都是静态的）。这通常是你同时使用 absolute 和 relative 的方式。

你也可以单独使用 relative，但这是非常罕见的情况。

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

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接