介绍定位
说起定位之前先复习一下文档流/正常流normal flow，即浏览器默认的文档布局方式：
- 内联元素从左到右
- 块级元素另起一行
定位就是通过设置position属性的值来覆盖默认的布局方式！使用top、left、right 、bottom来改变位置
position属性：
position: static默认值默认的布局方式。position: relative相对默认的布局位置进行定位。相对定位就是“相对自己定位”。position: absolute绝对定位元素脱离正常文档流，相对其定位上下文（Positioning Context）进行定位。
定位上下文就是指 绝对定位元素 相对 哪个元素定位，默认的定位上下文是<html>。
假如你想设定某个绝对定位元素的定位上下文，则需要在这个元素的父元素上设置position: relative。
position: fixed相对浏览器窗口进行定位。因此当滚动产生时，固定定位元素依然处于窗口的某个固定位置。position: sticky是相对定位和固定定位的结合。默认情况下表现为相对定位，当浏览器窗口顶端与元素的距离等于top属性的值时，转变为固定定位。
absolute 和 fixed
- 相对定位可以看作特殊的普通流定位，元素位置是相对于它在普通流中位置发生变化，而绝对定位使元素的位置与文档流无关，也不占据文档流空间，普通流中的元素布局就像绝对定位元素不存在一样
- 绝对定位的元素的位置是相对于距离最近的
非static祖先元素位置决定的。如果元素没有已定位的祖先元素，那么他的位置就相对于初始包含块html来定位 - 因为绝对定位与文档流无关，所以绝对定位的元素可以覆盖页面上的其他元素，可以通过
z-index属性控制叠放顺序，z-index越高，元素位置越靠上。 - fixed固定定位，固定定位是绝对定位的一种，固定定位的元素也不包含在普通文档流中，差异是固定元素的包含块儿是视口（viewport）
- 绝对定位宽度是收缩的，如果想撑满父容器，可以设置
100%
定位的整个想法是允许我们覆盖上面描述的基本文档流行为，以产生有趣的效果。如果你想稍微改变布局中一些盒子的位置，使它们的默认布局流程位置稍微有点古怪，不舒服的感觉呢？定位是你的工具。或者，如果您想要创建一个浮动在页面其他部分顶部的UI元素，并且/或者始终停留在浏览器窗口内的相同位置，无论页面滚动多少？定位使这种布局工作成为可能。
有许多不同类型的定位，您可以对HTML元素生效。要使某个元素上的特定类型的定位，我们使用position属性。
静态定位
静态定位是每个元素获取的默认值——它只是意味着“将元素放入它在文档布局流中的正常位置 ——这里没有什么特别的。static是position属性的默认值，它表示块保留在原本应该在的位置，不会重新定位。
相对定位
相对定位是我们将要看的第一个位置类型。 它与静态定位非常相似，占据在正常的文档流中，除了你仍然可以修改它的最终位置，包括让它与页面上的其他元素重叠。 让我们继续并更新代码中的 position 属性：
position: relative;
如果您在此阶段保存并刷新，则结果根本不会发生变化。那么如何修改元素的位置呢？ 您需要使用top，bottom，left和right属性 ，我们将在下一节中解释。相对定位是对于上一个 块来说top,bottom,left, 和right来精确指定要将定位元素移动到的位置。
绝对定位
绝对定位带来了非常不同的结果。让我们尝试改变代码中的位置声明如下：
position: absolute;
绝对定位的元素不再存在于正常文档布局流中。相反，它坐在它自己的层独立于一切。这是非常有用的：这意味着我们可以创建不干扰页面上其他元素的位置的隔离的UI功能 。例如，弹出信息框和控制菜单；翻转面板；可以在页面上的任何地方拖放的UI功能……
第二，注意元素的位置已经改变——这是因为top，bottom，left和right以不同的方式在绝对定位。 它们指定元素应距离每个包含元素的边的距离，而不是指定元素应该移入的方向。 所以在这种情况下，我们说的绝对定位元素应该位于从“包含元素”的顶部30px，从左边30px。简单来说，绝对定位元素会被放在<html>元素的外面，并且根据浏览器视口来定位。
定位上下文
哪个元素是绝对定位元素的“包含元素“？这取决于绝对定位元素的父元素的position属性。(参见 Identifying the containing block).
如果所有的父元素都没有显式地定义position属性，那么所有的父元素默认情况下position属性都是static。结果，绝对定位元素会被包含在初始块容器中。这个初始块容器有着和浏览器视口一样的尺寸，并且<html>元素也被包含在这个容器里面。简单来说，绝对定位元素会被放在<html>元素的外面，并且根据浏览器视口来定位。
绝对定位元素在HTML源代码中，是被放在<body>中的，但是在最终的布局里面，它离页面(而不是<body>)的左边界、上边界有30px的距离。我们可以改变定位上下文 —— 绝对定位的元素的相对位置元素。通过设置其中一个父元素的定位属性 —— 也就是包含绝对定位元素的那个元素（如果要设置绝对定位元素的相对元素，那么这个元素一定要包含绝对定位元素
介绍 z-index
您可以更改堆叠顺序吗？是的，您可以使用z-index属性。 “z-index”是对z轴的参考。你可以从源代码中的上一点回想一下，我们使用水平（x轴）和垂直（y轴）坐标来讨论网页，以确定像背景图像和阴影偏移之类的东西的位置。 （0,0）位于页面（或元素）的左上角，x和y轴跨页面向右和向下（适合从左到右的语言，无论如何）。
网页也有一个z轴：一条从屏幕表面到你的脸（或者在屏幕前面你喜欢的任何其他东西）的虚线。z-index 值影响定位元素位于该轴上的位置；正值将它们移动到堆栈上方，负值将它们向下移动到堆栈中。默认情况下，定位的元素都具有z-index为auto，实际上为0。
固定定位
还有一种类型的定位覆盖——fixed。 这与绝对定位的工作方式完全相同，只有一个主要区别：绝对定位固定元素是相对于 <html> 元素或其最近的定位祖先，而固定定位固定元素则是相对于浏览器视口本身。 这意味着您可以创建固定的有用的UI项目，如持久导航菜单。
让我们举一个简单的例子来说明我们的意思。首先，从CSS中删除现有的 p:nth-of-type(1) 和.positioned 规则。
还有一种类型的定位覆盖——fixed。 这与绝对定位的工作方式完全相同，只有一个主要区别：绝对定位固定元素是相对于 <html> 元素或其最近的定位祖先，而固定定位固定元素则是相对于浏览器视口本身。 这意味着您可以创建固定的有用的UI项目，如持久导航菜单。
position: sticky
还有一个可用的位置值称为 position: sticky，比起其他位置值要新一些。它基本上是相对位置和固定位置的混合体，它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点（例如，从视口顶部起10像素）为止，此后它就变得固定了。
例如，它可用于使导航栏随页面滚动直到特定点，然后粘贴在页面顶部。
还有一个可用的位置值称为 position: sticky，比起其他位置值要新一些。它基本上是相对位置和固定位置的混合体，它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点（例如，从视口顶部起10像素）为止，此后它就变得固定了。例如，它可用于使导航栏随页面滚动直到特定点，然后粘贴在页面顶部。