CSS:绝对定位和相对定位

CSS定位一直以来都是创建网页布局很重要的一部分。尽管有一些新的CSS布局例如Flexbox和CSS Grid出现。定位依旧在任何一个网页设计者的布局技巧中占有着重要的位置。

static （静态）
absolute （绝对）
relative （相对）
fixed （固定）

静态定位（Static)

静态是任何一个元素在网页上的默认位置。如果你不定义一个元素的定位，那么它就是静态的。意味着它在屏幕上的显示方式基于HTML的标准文档流，也就是元素在HTML文档中的默认位置。

如果你应用定位规则（例如 top或left）在一个拥有静态定位的元素上。这个规则会被忽略，而元素将会按照它在HTML标准文档流出现的方式出现。你将会很少需要设置元素的定位为静态，因为它是默认选项。

静态定位这样书写：

position:static;

以下是示例网页（H5标准）：

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Test</title>
    <style>
    *{margin: 0;padding: 0}
    #a{width: 200px;height: 200px;background-color: red;}
    #b{width: 200px;height: 200px;background-color: green;}
    #c{width: 200px;height: 200px;background-color: blue;}
    </style>
</head>
<body>
    <div id="a"></div>
    <div id="b"></div>
    <div id="c"></div>
</body>
</html>

在这里插入图片描述

将块A的定位设置为静态：

#a{position:static;width: 200px;height: 200px;background-color: red;}

可以看到网页布局无变化：

在这里插入图片描述

绝对定位(Absolute)

绝对定位可能是最容易理解的CSS定位。绝对定位这样书写：

positon:absolute;

这个值告诉浏览器，这个元素将会被移出标准文档流而不是放置在页面的确定位置。然后这个元素计算定位时将会匹配与它最近的父级非静态元素。因为一个绝对定位的元素被移出了标准文档流，它只影响在网页中这个元素出现之前和之后的元素定位。

举个例子，如果你有一个div元素用了相对定位。那么在这个DIV的内部，如果你想放置一个段落在距离这个div顶部50像素的距离，你需要为这个元素的position属性添加一个值：absolute 以及添加一个属性top并为它赋初值50px。

position:absolute;
top:50px;

我们看一看示例网页,为块B添加一个子元素B_1，先设置块B为相对定位，然后设置B_1为绝对定位，并给top属性的值设置为50像素：

CSS:

  #b{position: relative;width: 200px;height: 200px;background-color: green;}
  #b_1{position: absolute;top:50px;width: 100px;height: 100px;background-color:black;}

HTML:

<div id="b">
        <div id="b_1"></div>
</div>

可以看到位置的变化：

在这里插入图片描述

这个绝对定位元素将会始终距离相对定位的DIV块的顶部50像素，无论在标准文档流的其他元素元素如何显示。你的绝对定位元素需要使用相对定位的一个元素作为它的父级元素，你设置的值是相对于这个元素而定位的。

你能够使用的四个定位属性是：

top(顶部)
right（右边）
bottom（底部)
left(左边)

你只能对一个元素使用top和bottom中的一个属性，因为一个元素不能基于同方向的两个属性值来定位。

（同理，你也只能使用right和left中的一个）

如果一个元素设置了绝对定位，但是它没有非静态的父级元素，那么它将相对于页面中最高级别的元素

body元素来定位。

我们设置div元素a为绝对定位并设置距离左边为50像素，a的没有已经定义的父级元素:

(为了方便展示，这里我们为div元素b设置了不透明度50%)

#a{position:absolute;left:50px;width: 200px;height: 200px;background-color: red;}

在这里插入图片描述

可以看到设置a元素距离页面最左边为50像素生效，而此时页面中块元素的上下顺序被打乱。原因是：a元素设置绝对定位后被移出标准文档流，所以不再按照HTML文档中的元素出现顺序排列。

相对定位(Relative)

相对定位使用了类似绝对定位的四个定位属性。但是与绝对定位基于最近的非静态父级元素相比，相对定位元素的位置取决于它本来在标准文档流中应该出现的位置。

举个例子，如果你在你的网页中有三个段落，第三个有position:relative的样式。那么它的新位置将取决于它当前的位置。

 <p>Paragraph 1.</p>
 <p>Paragraph 2.</p>
 <p style="position: relative;left: 2em;">Paragraph 3.</p>

在以上的例子中，设置相对定位的第三个段落距离父容器的左边为2em，但仍然在两个段落的下方。它与标准文档流中与其他元素并列。如果你将它的定位属性调整为position;absolute，那么任何在它之后的元素都会显示在它上方，因为这个段落已经不在标准文档流中。（对照上个章节最后的一部分）

假设在示范网页中我们设置div元素b的为相对定位且相对当前位置的左边为50像素：

CSS

    #b{position: relative;left:50px;width: 200px;height: 200px;background-color:green;}

效果：

在这里插入图片描述

因为相对定位符合标准文档流，所以div元素b之后的元素并没有显示在它的上方。

在网页中的元素常常应用position:relative属性，而不对它设置任何定位值。意味着这个元素将会确切地出现在它在标准文档流应该出现的位置。

如果独立地对一个元素设置这个属性，意味着这个元素是可以作为其他元素绝对定位的环境。例如一个网页设计中的一个常见的场景，你想将一个div元素作为你网页的container，那么这个div元素就可以设置relative 属性，这样任何在这个div元素中的元素都可以将它作为定位环境。

固定定位(Fixed)

固定定位更像绝对定位一些。设置固定定位的元素计算位置时和绝对定位模型相仿，但是固定的元素就这么被固定在浏览器窗口上了（像水印一样），页面上滚动的所有元素都将经过这个元素。

为了使用这个属性值，你需要先设置：

position:fixed;

请记住，如果你在你的网站上固定了一个元素，那么它将始终出现在你刷新的页面的那个位置。举个例子，如果你的元素固定在了你网站的顶部，那么它将会出现在你每次刷新出的页面的顶部。

这里我们新增加一个div元素top并设置颜色为白色(不透明度50%），固定定位在距离顶部0像素的位置：

CSS

#top{position: fixed;top:0px;width:1000px;height: 100px;background-color:rgba(255,255,255,0.5)}

HTML

<div id="top"></div>

效果：

在这里插入图片描述

可以看得到，滚动网页时，顶部的白条位置不会发生改变（始终跟随浏览器窗口）。

原作者 By Jennifer Kyrnin：https://www.lifewire.com/absolute-vs-relative-3466208
翻译整理 By RainSilver https://rainsilver.github.io/blog