position ——【每天一点 CSS】

发表于 更新于

今天来聊聊关于CSS的属性position，它的取值如下：

1
2
3
4
position: static;   // 初始值
position: relative; // 相对定位
position: absolute; // 绝对定位
position: fixed;    // 固定定位

定位不是继承的。

static

概念

static是元素定位的默认值，让元素出现在常规文档流中。

relative

概念

每个元素在页面的文档流中都有一个自然位置，相对于这个原始位置进行移动就称为相对定位。而其周围的元素完全不受此影响。相对定位会在原先的位置留下空白。

应用场景

  1. 作为绝对定位的参照。
  2. 使用top、right、bottom和left调整元素的位置，元素在视觉上看起来就像被推到一个不同的位置。

absolute

概念

元素会被移出文档流。就不像static或者relative这样占用空间。

没有额外设置的情况下，绝对定位是相对于 body 进行定位的。可以对希望称为绝对定位参照体的祖先元素添加 position: relative;。

绝对定位不会在原先的位置留下空白。

fixed

概念

fixed 有点类似于absolute，会被移出文档流。不一样的是fixed始终相对浏览器窗口定位。

参考文献