Why Position? 覆盖基本的文档流行为。
定位允许您从正常的文档流布局中取出元素，并使它们具有不同的行为，例如放在另一个元素的上面，或者始终保持在浏览器视窗内的同一位置。 本文解释的是定位(position)的各种不同值，以及如何使用它们。
文档流
定位是一个相当复杂的话题，所以我们深入了解代码之前，让我们审视一下布局理论，并让我们了解它的工作原理。
首先，围绕元素内容添加任何内边距、边界和外边距来布置单个元素盒子——这就是 盒模型 ，我们前面看过。 默认情况下，块级元素的内容宽度是其父元素的宽度的100％，并且与其内容一样高。内联元素高宽与他们的内容高宽一样。您不能对内联元素设置宽度或高度——它们只是位于块级元素的内容中。 如果要以这种方式控制内联元素的大小，则需要将其设置为类似块级元素 display: block;。
这只是解释了单个元素，但是元素相互之间如何交互呢？ 正常的布局流（在布局介绍文章中提到）是将元素放置在浏览器视口内的系统。默认情况下，块级元素在视口中垂直布局——每个都将显示在上一个元素下面的新行上，并且它们的外边距将分隔开它们。
内联元素表现不一样——它们不会出现在新行上；相反，它们互相之间以及任何相邻（或被包裹）的文本内容位于同一行上，只要在父块级元素的宽度内有空间可以这样做。如果没有空间，那么溢流的文本或元素将向下移动到新行。
如果两个相邻元素都在其上设置外边距，并且两个外边距接触，则两个外边距中的较大者保留，较小的一个消失——这叫外边距折叠, 我们之前也遇到过。
有许多不同类型的定位，您可以对HTML元素生效。要使某个元素上的特定类型的定位，我们使用position属性。
静态定位 static
静态定位是每个元素获取的默认值——它只是意味着“将元素放入它在文档布局流中的正常位置 ——这里没有什么特别的。
相对定位 relative
与静态定位非常相似，占据在正常的文档流中，除了你仍然可以修改它的最终位置，包括让它与页面上的其他元素重叠。
如何修改元素的位置呢？ 您需要使用top，bottom，left和right属性.top, bottom, left, 和 right 来精确指定要将定位元素移动到的位置。
绝对定位
绝对定位的元素不再存在于正常文档布局流中。相反，它坐在它自己的层独立于一切。
绝对定位元素的“包含元素”是什么？
绝对定位虽然不存在于正常的文档布局流中，但其最终必然会在一个块中。那是哪一个块呢？这取决于绝对定位元素的父元素的position属性。(参见 Identifying the containing block).
如果所有的父元素都没有显式地定义position属性，那么所有的父元素默认情况下position属性都是static。结果，绝对定位元素会被包含在初始块容器中。这个初始块容器有着和浏览器视口一样的尺寸，并且元素也被包含在这个容器里面。简单来说，绝对定位元素会被放在元素的外面，并且根据浏览器视口来定位。
可以通过设置其中一个父元素的定位属性 —— 也就是包含绝对定位元素的那个元素（如果要设置绝对定位元素的相对元素，那么这个元素一定要包含绝对定位元素）。
z-index
当元素开始重叠，什么决定哪些元素出现在其他元素的顶部？
定位的元素胜过未定位的元素。
源顺序中后定位的元素将赢得先定位的元素
- 可以使用
z-index属性改变堆叠顺序
固定定位 fixed
与绝对定位的工作方式完全相同，只有一个主要区别：绝对定位固定元素是相对于 `` 元素或其最近的定位祖先，而固定定位固定元素则是相对于浏览器视口本身。
粘连定位 sticky
基本上是相对位置和固定位置的混合体，它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点（例如，从视口顶部起10像素）为止，此后它就变得固定了。
1 | .positioned { |