静态定位和相对定位的区别答案

【问题标题】：Difference between static and relative positioning静态定位和相对定位的区别
【发布时间】：2011-06-28 00:39:44
【问题描述】：

在 CSS 中，静态（默认）定位和相对定位有什么区别？

【问题讨论】：

不同之处是你经常输入position: relative，而你从不输入position: static:)

【解决方案1】：

静态：默认情况下元素的位置是静态的。如果添加 top、bottom、right 或 left 等属性，则不会执行任何操作。

div{
    width:200px;
    height:200px;
    background-color:yellow;
    display:inline-block;
}

#middle{
    background-color:pink;
}

#static #middle{
    position:static;
    top:100px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
   <h1>Position Property</h1>
   <section id="static">
       <h2>Static</h2>
       <div></div>
       <div id="middle"></div>
       <div></div>
   </section>
</body>
</html>

相对：位置的变化将与该 div 的原始位置相关。

div{
    width:200px;
    height:200px;
    background-color:yellow;
    display:inline-block;
}

#middle{
    background-color:pink;
}

#relative #middle{
    position:relative;
    top:100px;
    left:100px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
   <h1>Position Property</h1>
 <section id="relative">
    <h2>Relative</h2>
    <div></div>
    <div id="middle"></div>
    <div></div>
</section>

</body>
</html>

绝对：相对于其最近的定位祖先（如果有）定位；否则，它相对于初始包含块放置。来源：MDN

div{
    width:200px;
    height:200px;
    background-color:yellow;
    display:inline-block;
}

#middle{
    background-color:pink;
}

#absolute{
    position:relative;
}

#absolute #middle{
    position:absolute;
    top:10px;
    left:10px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
<h1>Position Property</h1>
<section id="absolute">
    <h2>Absolute</h2>
    <div></div>
    <div id="middle"></div>
    <div></div>
</section>

</body>
</html>

固定：即使我们滚动页面后，固定属性也会保持在同一位置。该位置始终相对于包含块。

div{
    width:200px;
    height:200px;
    background-color:yellow;
    display:inline-block;
}

#middle{
    background-color:pink;
}

#fixed #middle{
    position:fixed;
    top:10px;
    left:10px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
<h1>Position Property</h1>
<section id="fixed">
    <h2>Fixed</h2>
    <div></div>
    <div id="middle"></div>
    <div></div>
</section>
</body>
</html>

【讨论】：

【解决方案2】：

static 和 relative 是位置属性。relative 用于许多用途。不为一个。但请记住，静态和相对不会损害 Html 的正常文档流。 static 是您将任何元素写入 Html 时的默认位置。如果一个元素具有相对位置，则该元素可以相对于其原始位置定位。当您想从小空间调整元素时，请使用相对位置，这样您就不需要添加边距、填充等如果元素具有相对位置并且它具有子元素。在这里，我们可以相对于其父项进行测量。如果给孩子添加宽度 10%，这意味着 (width+padding)x10%。但是你不添加相对关键字，你会得到 widthx10%。除此之外，亲戚最重要的用法是；您可以将任何元素放在它的顶部。但是您必须对孩子使用“absolute”关键字。给孩子添加绝对关键字时，孩子不在正常的文档流中

【讨论】：

【解决方案3】：

回答“为什么 CSS 仍会实现 position: static;”在一个场景中，对父级使用 position:relative 对子级使用 position:absolute 会限制子级的缩放宽度。在水平菜单系统中，您可以拥有链接的“列”，使用“宽度：自动”不适用于相对父母。在这种情况下，将其更改为“静态”将允许宽度根据内容变化。

我花了好几个小时想知道为什么我不能让我的容器根据其中的内容量进行调整。希望这会有所帮助！

【讨论】：

这就是答案！每个人都只告诉专业人士相对定位，在这样的问题中忽略了重点：有什么区别。

【解决方案4】：

Matthew Abbott 有一个非常好的答案。

绝对和相对定位的项目服从top、left、right 和bottom 命令（偏移），而静态定位的项目不服从。

相对定位的项目从它们通常在 html 中的位置移动偏移量。

绝对定位项从文档或 DOM 树上的下一个相对定位元素移动偏移量。

【讨论】：

【解决方案5】：

你可以在这里看到一个简单的概述：W3School

另外，如果我没记错的话，在声明一个相对元素时，默认情况下它会保持在与其他情况相同的位置，但是您可以获得相对于该元素绝对定位其中的元素的能力，我已经过去发现非常有用。

【讨论】：

w3schools...我不会对此投反对票，但你必须忍受耻辱。
同时，在 2017 年结束时，W3Schools 并没有以前那么糟糕（它仍然不完美，但他们认真对待了社区的强烈反对并实际上有所改善）。
同时，在 2018 年过去了，W3Schools 仍然没有从前那么糟糕，但让他们感到难过的是，他们的声誉即使在今天仍然如此，以至于向其他开发者提及上述第一条评论，仍然得到一个经典的笑声……回到我的时代……W3School……第一印象嘿……

【解决方案6】：

静态定位是元素的默认定位模型。它们显示在作为正常 HTML 流的一部分呈现的页面中。静态定位的元素不遵守left、top、right 和bottom 规则：

相对定位允许您指定一个特定的偏移量（left、top 等），它相对于元素在 HTML 流中的正常位置。因此，如果我在 div 中有一个文本框，我可以在文本框上应用相对定位，使其显示在相对于它通常放置在 div 中的特定位置：

还有绝对定位 - 您可以指定元素相对于整个文档的确切位置，或元素树更靠前的下一个相对定位的元素：

当position: relative 应用于层次结构中的父元素时：

注意我们的绝对位置元素是如何被相对位置元素绑定的。

最后是固定的。固定定位将元素限制在视口中的特定位置，该位置在滚动期间保持原位：

您还可以观察到固定位置元素不会导致滚动的行为，因为它们不被视为受视口约束：

而绝对定位的元素仍受视口约束并会导致滚动：

..当然，除非你的父元素使用overflow: ? 来确定滚动的行为（如果有的话）。

使用绝对定位和固定定位，将元素从 HTML 流中取出。

【讨论】：

很好的答案，但是（对于相对位置）不是基于元素正常位置的偏移量吗？
我同意 Baztoune 的观点，这种相对定位元素的定义具有误导性。 static 和 relative 元素是相同的，除了后者您可以重新定位它相对于其原始位置，而不是包含元素 - 这就是 absolute 出现的地方。另外，像使用static 以外的值定位的任何元素一样，您可以使用z-index。
我已经修改了这个答案以更准确地定义相对定位并包含图像以展示不同的位置类型。
我想知道为什么 CSS 仍然会实现 position: static; 而不是默认用 position: relative; 替换它？如果不想定位top: 0; 和left: 0; 以外的项目，那么我们不要这样做，对吧？ position: static; 仍然需要作为 CSS 的一部分，是否存在根本原因？
@cram2208 因为 relative 使子节点绝对定位的节点相对于它们定位，static 允许绝对定位的子节点忽略它们的位置并相对于最近的相对定位元素定位。这是一个重要的概念

【解决方案7】：

相对位置是相对于正常流程的。该元素的相对位置（带有偏移量）是相对于该元素在不移动的情况下正常所处的位置。

【讨论】：

【解决方案8】：

相对位置可让您使用上/下/左/右进行定位。除非您使用边距参数，否则静态不会让您这样做。 Top 和 margin-top 是有区别的。

你不需要使用静态的，因为它是默认的

【讨论】：