CSS position：相对位置与绝对位置 的关键区别

定位类型

CSS position 属性定义了元素在网页上的定位方式。

有几种类型的定位： static, relative, absolute, fixed, sticky, initial, 和 inherit。首先，让我们解释一下所有这些类型的含义。

Static - 将遵循文档的常规流，这时设置top-left-bottom-right不起作用。
relative- 定位的元素相对于其正常位置定位，
absolute–相对于具有非静态位置的第一个父元素
fixed- 相对于视口或浏览器卷绕器本身显示。
sticky- 根据用户的滚动位置进行定位。
现在我们已经解释了基础知识，我们将更多地讨论两个最常用的位置值 - relative和absolute。

什么是相对定位？

当您设置相对于元素的位置时，如果不添加任何其他定位属性（顶部，底部，右侧，左侧），则不会发生任何事情。当您添加其他位置（例如 left： 20px）时，元素将从其正常位置向右移动 20px。在这里，您可以看到此元素相对于自身而言。当元素移动时，布局上的其他元素不会受到影响。

在设置位置时，您应该记住一件事 - 相对于元素限制了绝对定位的子元素的范围。这意味着作为此元素的子元素的任何元素都可以绝对地位于此块中。

在这个简短的解释之后，我们需要通过展示一个例子来支持它。

在此示例中，您将看到相对定位的元素在其属性更改时如何移动。第一个元素从其正常位置向左和向顶部移动，而第二个元素则保留在同一位置，因为没有更改任何其他定位属性。

<div id="first_element">First element</div> 
<div id="second_element">Second element</div> 

#first_element { 
  position: relative; 
  left: 30px; 
  top: 70px; 
  width: 500px; 
  background-color: #fafafa; 
  border: solid 3px #ff7347; 
  font-size: 24px; 
  text-align: center; 
} 

#second_element { 
  position: relative; 
  width: 500px; 
  background-color: #fafafa; 
  border: solid 3px #ff7347; 
  font-size: 24px; 
  text-align: center; 
} 

什么是绝对定位？

这种类型的定位允许您将元素精确地放置在所需的位置。

定位是相对于第一个相对（或绝对）定位的父元素完成的。在没有定位父元素的情况下，它将被定位为与HTML元素（页面本身）直接相关。

使用绝对定位时要记住的一件重要事情是确保它不会被过度使用，否则，它可能导致维护噩梦。

接下来，再一次，是展示一个例子。

在此示例中，父元素的位置设置为 。现在，当您将子元素的位置设置为 时，将相对于父元素执行任何其他定位。子元素相对于父元素的顶部移动 100px，相对于父元素的右侧移动 40px。

<div id=”parent”>
  <div id=”child”></div>
</div>

#parent { 
  position: relative; 
  width: 500px; 
  height: 400px; 
  background-color: #fafafa; 
  border: solid 3px #9e70ba; 
  font-size: 24px; 
  text-align: center; 
} 

#child { 
  position: absolute; 
  right: 40px; 
  top: 100px; 
  width: 200px; 
  height: 200px; 
  background-color: #fafafa; 
  border: solid 3px #78e382; 
  font-size: 24px; 
  text-align: center; 
} 

通过这些示例，您已经看到了绝对元素和相对定位元素之间的差异。

希望本文能提供到帮助。