定位（positioning）背后的想法很简单，就是能让用户能够自由控制元素显示的位置，无论是相对于父元素的，其他元素的，或是视口的。

---

基本概念

定位的类型

定位总共有5种，由position属性来定义，如下所示：

image.png

• static： 基于文档流生成block元素
• relative：元素盒子的初始位置会有所偏移，不过形状还是保留的；
• absolute: 首先将元素从正常的文档流中移除，然后按照其容器盒子进行定位；
• fixed： 盒子行为类似absolute，不过期容器盒子是视口
• sticky：元素保留在正常的文档流里面，知道触发sticky的状态发生，到那时候就从文档流中移除。

---

Offset属性

偏移属性有上下左右四个方向的元素组成：

image.png

这里比较重要的一个概念就是这4个值所参照的对象不是需要移动的元素，而是参照容器元素，因此如果想把元素放到右下角，是这样的：

top: 50%; bottom: 0; left: 50%; right: 0;

而不是bottom： 100%， right：100%。如下图所示：

image.png

---

宽度和高度

常用的宽度和高度设置相比都很熟悉了，就不再赘述，来看个例子：

top: 0; bottom: 0; left: 0; right: 50%; width: 50%; height: 100%;
padding: 2em;

image.png

限制宽度和高度

范围可以通过在前面添加min或是max来实现：

image.png image.png

例如：

top: 10%; bottom: 20%; left: 50%; right: 10%; min-width: 10em; min-height: 20em;

image.png

---

内容溢出和裁剪

内容溢出

image.png

默认值为visible，意思是内容将会显示，而且是在盒子外面。如下图所示，而hidden和scroll顾名思义：

image.png

另外还有个overflow：auto；来让浏览器自己决定采用哪种行为。

---

元素可见性

元素的可见性由visibility来控制：

image.png

这个比较简单，其实不太明确的就是collapse，专门用在CSS Table的渲染，后面再讨论。

---

绝对定位

对于决定定位的元素来说，其容器元素就是其最近的position：static的祖先元素。所有说设定一个容器元素为relative是很常见的：

p {margin: 2em;}
p.contain {position: relative;} /* establish a containing block*/ 
b {position: absolute; top: auto; right: 0; bottom: 0; left: auto;
width: 8em; height: 5em; border: 1px solid gray;}

image.png

绝对定位元素的位置和大小设置

首先我们可以通过offset的属性来设置宽度和高度：

#masthead h1 {position: absolute; top: 1em; left: 1em; right: 25%; bottom: 10px; margin: 0; padding: 0; background: silver;}

image.png

z轴上的排布

我们一般使用z-index来处理交叠元素的显示情况：

image.png
image.png

一般来说数值越高，越放在上面，就类似PS中的图层。

image.png

---

固定定位

这也算是常用的定位了：

image.png

div#header {position: fixed; top: 0; bottom: 80%; left: 20%; right: 0; background: gray;}
div#sidebar {position: fixed; top: 0; bottom: 0; left: 0; right: 80%; background: silver;}

---

相对定位

相对定位应该也算是比较通用的了，来看个例子：

img {position: relative; top: -20px; left: -20px;}

image.png

那为什么叫相对定位呢，其实很有意思，相对定位元素的原本占着的位置不会被挤占，也就是说还在文档流里，所以相对的对象就是原本的位置。就像上面的例子一样。

---

Sticky 定位

这个定位还比较新，来看个示例吧：

image.png

在你滚动的时候自动收缩起来的分类其实即使sticky。不过其实现可能没那么简单，首先我们需要通过offset来设置sticky block：

#scrollbox {overflow: scroll; width: 15em; height: 18em;} 
#scrollbox h2 {position: sticky; top: 2em; bottom: auto;
left: auto; right: auto;}

image.png

当慢慢滚到页面顶端就会触发sticky，感觉像绝对定位一样定在上面。

image.png

---

小结

借助定位可以自由放置元素的位置。虽然现在很多都用grid布局了，不过定位的应用也非常广的，像sidebar等等。