CSS定位简介

CSS 拥有一个 position 属性，其取值可以是 static、relative、absolute 和 fixed。

什么是 CSS 定位？

CSS 定位 是一种可以“微调” HTML 元素（如 div）位置的方法，使其向任意方向移动，例如上、右、下或左。需要注意的是，这种“微调”并不会将元素从正常的文档流中移除，而是将其在原位置的基础上进行偏移。

下面是一个包含三个 div 的示例。

每个 div 的 display 属性被设置为 inline-block，这样它们会并排显示，而不是堆叠在一起。

观察中间的 div，它略微向下偏移了。我们通过将它的 position 设置为 relative 实现了这一点，使用的是 div.bg2 选择器。这个选择器告诉浏览器：找到具有 class="bg2" 属性的 <div> 元素，并将其定位方式设为 relative。

注意，CSS 代码第 10 行的 div 选择器将所有 div 元素的 position 设置为 static，同时设置了 top: 40px。

默认情况下，CSS 的 position 属性值为 static，因此我们通常无需显式声明。当 position 为 static 时，无法通过 top 属性来改变元素的位置。但一旦将 position 设为 relative，top 属性便开始生效。

那么浏览器是如何决定采用 div 选择器中定义的 position: static，还是采用 div.bg2 选择器中定义的 position: relative 呢？这由一个称为 CSS 优先级 的机制来解决。CSS 优先级的工作原理是：更具体的 CSS 选择器会覆盖较通用的选择器。

在上面的例子中，有两个 CSS 选择器在争夺 position 属性的控制权。第一个选择器 div 将 position 设置为 static，第二个选择器 div.bg2 将 position 设置为 relative。

第二个选择器胜出，因为它的规则更具体——它专门针对拥有 bg2 类的 div 元素。而第一个选择器的规则较为宽泛，仅针对所有 div 元素。因此，更具体的规则具有更高的优先级。