Css权威指南(4th，第四版中文翻译)-11.定位
定位（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等等。
