图解CSS定位

1 前言

1.1 定位的背景

在CSS中，元素放置规则分为以下三种：

• 普通文档流：元素按照从上至下，从左至右的顺序排列，但元素又分行内元素和块级元素，其排列方式有所不同：
  • 行内元素：水平排列，直到水平方向占满一行后再另起一行排列。
  • 块级元素：垂直排列，每一个块级元素都会独自占用一行。
• 浮动流：设置浮动的元素会向左或向右浮动，直到碰到父级元素或其他浮动的元素，需要注意的是，设置浮动的元素只是半脱离文档流。
• 脱离文档的定位流：当定位设置为absolute绝对定位或fixed固定定位时，元素会完全脱离文档流，元素的位置就是定位时设置的位置，其布局不会受其他元素的影响，也不会影响到其他元素。

1.2 定位简介

定位就是让元素改变普通文档流行为的一种方式，定位在CSS中的关键字为position，它共有五种取值：

• static（默认值）：静态定位，可以理解为没有定位；
• relative：相对定位；
• absolute：绝对定位；
• fixed：固定定位；
• sticky：粘性定位。

使用方法如下：

.box {
  position: static | relative | absolute | fixed | sticky;
}

2 阅读本文需要了解的内容

2.1 方位属性

元素在设置定位后，需要给其设置方位属性（top、bottom、left、right）用于指定元素定位位置：

由于top和bottom、left和right属于相互矛盾的两对属性，所以在同时设置这类属性后，top和left的优先级较高，正如上图中top和left箭头用实线表示，而right和bottom箭头用虚线表示。

2.2 层叠顺序

为什么给元素设置定位属性后，元素会覆盖到其他非定位元素的上方？这是因为当元素设置定位属性后，其z-index属性默认为auto，根据层叠顺序，z-index: auto的元素的优先级高于block块级元素，所以定位元素会覆盖在其他非定位元素的上方。

拓展阅读：CSS层叠上下文、层叠顺序和层叠等级

2.3 文中的代码示例

文中示例的公共代码如下：

<div class="container">
  <div class="box red"></div>
  <div class="box yellow"></div>
  <div class="box green"></div>
</div>

公共CSS样式如下：

.container {
  width: 100%;
  height: 800px;
  background-color: skyblue;
  position: relative;
}

.box {
  height: 100px;
  display: inline-block;
}

.red {
  width: 100px;
  background-color: red;
}

.yellow {
  width: 200px;
  background-color: yellow;
}

.green {
  width: 150px;
  background-color: green;
}

页面效果如下：

文中的示例都是针对于yellow，所以例子中给出的主要代码都是关于yellow的CSS代码。

3 五种定位方式详解

3.1 static静态定位

若不给元素添加定位属性，则静态定位为元素的默认定位属性，即元素遵循普通文档流的规则排列，代码如下：

position: static;

3.2 relative相对定位

相对定位有如下特点：

1. 相对定位参照的对象是元素原来的位置；
2. 相对定位元素不脱离普通文档流，元素在普通文档流中的原来位置依然保留，并且在其他普通文档流中的元素看来，这个元素依然在原来的位置存在。

如下示例，给yellow添加相对定位并距离顶部100px后，yellow移动到了预期位置，并且其原来的位置依然在普通文档流中保留，因为green并没有因为yellow“离开”了原来的位置而补位上去：

这个例子的主要代码如下：

.yellow {
  position: relative;
  top: 100px;
  width: 200px;
  background-color: yellow;
}

3.3 absolute绝对定位

绝对定位有如下特点：

1. 绝对定位参照的对象是最近已经定位的父元素，如果没有已经定位的父元素，那么参照对象时根元素html；
2. 绝对定位元素脱离普通文档流，元素不再占有原来的位置，也不会对其他普通文档流元素造成影响。

如下示例，在给yellow添加绝对定位并距离顶部50px、距离左侧50px，yellow移动到了预期位置，可以发现其原来的位置没有被保留，yellow“离开”后，原来的位置被green补位上去了。

这个例子的主要代码如下：

.yellow {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 200px;
  background-color: yellow;
}

3.4 fixed固定定位

固定定位有如下特点：

1. 固定定位元素参照的对象是浏览器窗口，若元素设置了固定定位，那么其位置即使窗口发生滚动，也不会变化，像钉在屏幕上一样；
2. 固定定位元素脱离普通文档流。

如下示例，设置父元素高度为2000px，这样页面就出现了滚动条，将yellow设置为固定定位，并定位到屏幕正中间，当滚动条在最上方时，可以看到red和green，当滚动条到最底部时，red和green就看不到了，但是yellow依然还在页面上，这就是固定定位：

.yellow {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  background-color: yellow;
}

3.5 sticky粘性定位

粘性定位有如下特点：

1. 粘性定位参照的对象是浏览器窗口（固定定位的特点）；
2. 粘性定位不脱离普通文档流（相对定位的特点）。

粘性定位非常的特殊，区别与其它几种定位，粘性定位的元素是依赖窗口的滚动的，随之窗口的滚动，粘性定位元素会在relative相对定位与fixed固定定位之间转换：

1. 当粘性定位元素的原来位置全部在窗口内时，此时元素表现为relative相对定位；
2. 当粘性定位元素的原来位置部分或全部在窗口外时，此时元素表现为fixed固定定位。

如下示例，设置父元素高度为2000px，这样页面就出现了滚动条，将yellow设置为粘性定位，当滚动条在最上方时，yellow的原位置全部在窗口内，此时元素表现为relative相对定位，并且此时也可以看到red和green，当滚动条到最底部时，这时yellow的原位置已经全部不在窗口内，此时元素表现为fixed固定定位，red和green就看不到了，但是yellow依然还在页面上，这就是粘性定位：

注意：文字和图片其实很难完全表达出粘性定位的特点，在页面滚动时，元素原来的位置在窗口内的变化过程，最能反应粘性布局的特点，推荐读者访问页面sticky demo在线体验一下。

这个例子的主要代码如下：

.yellow {
  position: sticky;
  top: 0;
  left: 0;
  width: 200px;
  background-color: yellow;
}

4 总结

学习定位需要重点关注以下两点：

1. 每种定位参照的对象是什么？
2. 定位是否脱离普通文档流？

各个定位的特点如下表：

定位方式	是否脱离普通文档流	参照对象
static静态定位（默认）	否	-
relative相对定位	否	元素原来的位置
absolute绝对定位	是	已定位的父级元素
fixed固定定位	是	浏览器窗口
sticky粘性定位	否	浏览器窗口