定位

定位的整个想法是允许我们覆盖基本文档流行为，以产生有趣的效果。如果想稍微改变布局中一些盒子的位置，使它们的默认布局流程位置稍微有点古怪，不舒服的感觉呢？定位是我们的工具。或者，如果想要创建一个浮动在页面其他部分顶部的UI元素，并且/或者始终停留在浏览器窗口内的相同位置，无论页面滚动多少？定位使这种布局工作成为可能。
有许多不同类型的定位，可以对HTML元素生效。要使某个元素上的特定类型的定位，我们使用position属性。

静态定位

静态定位是每个元素获取的默认值——它只是意味着“将元素放入它在文档布局流中的正常位置 ——这里没有什么特别的。
静态定位是默认行为！

相对定位

相对定位是我们将要看的第一个位置类型。
相对于以前的位置移动，偏移前的位置保留不动。在使用相对定位时，就算元素被偏移了，但是他仍然占据着它没偏移前的空间。它与静态定位非常相似，占据在正常的文档流中，除了你仍然可以修改它的最终位置，包括让它与页面上的其他元素重叠。让我们继续并更新代码中的position属性：position: relative;
如果在此阶段保存并刷新，则结果根本不会发生变化。那么如何修改元素的位置呢？需要使用top，bottom，left和right属性。
top, bottom, left, 和 right 来精确指定要将定位元素移动到的位置，注意：这些属性的值可以采用逻辑上期望的任何单位——px，mm，rems，％等。
例如添加代码：

1 2	top: 30px; left: 30px;

得到的结果是它移动到了底部和右边，但是我们指定的确实顶部和左边，听起来不合逻辑，但是这是相对定位的工作方式，我们需要考虑一个看不见的力，推动定位的盒子的一侧，移动它的相反方向。所以例如top：30px；是指定一个力推动框的顶部，使其向下移动30px；

绝对定位

绝对定位带来了非常不同的结果。绝对定位代码中的位置声明如：position: absolute;
首先，请注意，定位的元素应该在文档流中的间隙不再存在，绝对定位的元素不再存在于正常文档布局流中。相反，它坐在它自己的层独立于一切。这是非常有用的：这意味着我们可以创建不干扰页面上其他元素的位置的隔离的UI功能。例如，弹出信息框和控制菜单；翻转面板；可以在页面上的任何地方拖放的UI功能……
第二，注意元素的位置已经改变——这是因为top，bottom，left和right以不同的方式在绝对定位。它们指定元素应距离每个包含元素的边的距离，而不是指定元素应该移入的方向。所以在这种情况下，我们说的绝对定位元素应该位于从“包含元素”的顶部30px，从左边30px。

absolute 是最棘手的position值。 absolute 与 fixed 的表现类似，但是它不是相对于视窗而是相对于最近的“positioned”祖先元素。如果绝对定位（position属性的值为absolute）的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。记住一个“positioned”元素是指 position 值不是 static 的元素。
如果元素是绝对定位的，则它相对于它的父元素定位。

定位上下文

如果所有的父元素都没有显式地定义position属性，那么所有的父元素默认情况下position属性都是static。结果，绝对定位元素会被包含在初始块容器中。这个初始块容器有着和浏览器视口一样的尺寸，并且< html>元素也被包含在这个容器里面。简单来说，绝对定位元素会被放在 < html>元素的外面，并且根据浏览器视口来定位。
绝对定位元素在HTML源代码中，是被放在< body>中的，但是在最终的布局里面，它离页面(而不是< body>)的左边界、上边界有30px的距离。我们可以改变定位上下文 —— 绝对定位的元素的相对位置元素。通过设置其中一个父元素的定位属性 —— 也就是包含绝对定位元素的那个元素（如果要设置绝对定位元素的相对元素，那么这个元素一定要包含绝对定位元素）。

介绍z-index

所有这些绝对定位很有趣，但还有另一件事我们还没有考虑到 ——当元素开始重叠，什么决定哪些元素出现在其他元素的顶部？我们在定位上下文中只有一个定位的元素，它出现在顶部，因为定位的元素胜过未定位的元素。当我们有不止一个的时候呢？
尝试添加以下代码：

p:nth-of-type(1) {
  position: absolute;
  background: lime;
  top: 10px;
  right: 30px;
}

“z-index”是对z轴的参考。可以从源代码中的上一点回想一下，我们使用水平（x轴）和垂直（y轴）坐标来讨论网页，以确定像背景图像和阴影偏移之类的东西的位置。（0,0）位于页面（或元素）的左上角，x和y轴跨页面向右和向下（适合从左到右的语言，无论如何）。
网页也有一个z轴：一条从屏幕表面到你的脸（或者在屏幕前面你喜欢的任何其他东西）的虚线。z-index 值影响定位元素位于该轴上的位置；正值将它们移动到堆栈上方，负值将它们向下移动到堆栈中。默认情况下，定位的元素都具有z-index为auto，实际上为0。
要更改堆叠顺序，可以将以下声明添加到CSS规则中：z-index: 1;
请注意，z-index只接受无单位索引值；我们不能指定我们想要一个元素是Z轴上23像素—— 它不这样工作。较高的值将高于较低的值，这取决于我们使用的值。使用2和3将产生与300和40000相同的效果。

固定定位

一个固定定位（position属性的值为fixed）元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。和 relative 一样top 、 right 、 bottom 和 left属性都可用。
还有一种类型的定位覆盖——fixed。这与绝对定位的工作方式完全相同，只有一个主要区别：绝对定位固定元素是相对于 < html> 元素或其最近的定位祖先，而固定定位固定元素则是相对于浏览器视口本身。这意味我们可以创建固定的有用的UI项目，如持久导航菜单。
body规则如下：

body {
  width: 500px;
  height: 1400px;
  margin: 0 auto;
}

现在我们要给< h1>元素 position: fixed;，并让它坐在视口的顶部中心。将以下规则添加到CSS：

h1 {
  position: fixed;
  top: 0;
  width: 500px;
  margin: 0 auto;
  background: white;
  padding: 10px;
}

0```;是要使它贴在屏幕的顶部；我们然后给出标题与内容列相同的宽度，并使用可靠的老技巧```margin: 0 auto;``` 使它居中。然后我们给它一个白色背景和一些内边距，所以内容将不会在它下面可见。

如果现在保存并刷新，会看到一个有趣的小效果，标题保持固定，内容显示向上滚动并消失在其下。 但是我们可以改进这一点——目前标题下面挡住一些内容的开头。这是因为定位的标题不再出现在文档流中，所以其他内容向上移动到顶部。
个固定定位元素不会保留它原本在页面应有的空隙（脱离文档流）。

```令人惊讶地是移动浏览器对 fixed 的支持很差。

position: sticky

还有一个定位值可用，叫做position: sticky，是一个比其他属性要新一些的属性。这基本上是相对位置和固定位置之间的混合，其允许定位的元件像它被相对定位一样动作，直到其滚动到某一阈值点（例如，从视口顶部10像素），之后它变得固定。