正常布局流（normal flow）
浏览器默认的HTML布局方式。
而当我们使用css进行布局时，就是对正常布局流进行修改。
z-index
"z-index"是对 z 轴的参考。我们使用水平（x 轴）和垂直（y 轴）坐标来讨论网页，以确定像背景图像和阴影偏移之类的东西的位置。
网页也有一个 z 轴：一条从屏幕表面到你的脸（或者在屏幕前面你喜欢的任何其他东西）的虚线。z-index 值影响定位元素位于该轴上的位置；正值将它们移动到堆栈上方，负值将它们向下移动到堆栈中。默认情况下，定位的元素都具有 z-index 为 auto，实际上为 0。
position
1. position 属性的作用
position 属性用来指定一个元素在网页上的位置，一共有5种定位方式，即position 属性主要有五个值。
staticrelativefixedabsolutesticky（2017年浏览器才支持）
2. static 属性值
static 是 position 属性的默认值。如果省略 position 属性，浏览器就认为该元素是 static 定位。
这时，浏览器会按照源码的顺序，决定每个元素的位置，这称为"正常的页面流"（normal flow）。每个块级元素占据自己的区块（block），元素与元素之间不产生重叠，这个位置就是元素的默认位置。
html
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
<p>没有任何其他干涉，这就是正常布局流(normal flow)</p>
</body>注意，static 定位所导致的元素位置，是浏览器自主决定的，所以这时top、bottom、left、right这四个属性无效。
3. relative、absolute、fixed
relative、absolute、fixed这三个属性值有一个共同点，都是相对于某个基点的定位，不同之处仅仅在于基点不同。 这三种定位都不会对其他元素的位置产生影响，因此元素之间可能产生重叠。
3.1 relative属性值------相对定位
relative 表示：相对于默认位置（即 static 时的位置）进行偏移，即定位基点是元素的默认位置。
它必须搭配 top、bottom、left、right 这四个属性一起使用，用来指定偏移的方向和距离。
css
div {
position: relative`relative`对`div`;没有任何效果。
left: 50px; /* 从默认位置向右偏移50px（即距离左边50px）*/
background-color:blue;
}
html
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
<div>我在哪里？<div>运行效果如下： 
如果你把这段代码 left: 50px; 注释掉，就会发现， relative 对 div 没有任何效果。
3.2 absolute属性值------绝对定位
absolute表示，相对于上级元素（一般是父元素）进行偏移，即定位基点是父元素。
它有一个重要的限制条件：定位基点（一般是父元素）不能是static定位，否则定位基点就会变成整个网页的根元素html。另外，absolute定位也必须搭配top、bottom、left、right这四个属性一起使用。
css
#father {
positon: relative;
background-color:red;
}
#son {
position: absolute;
background-color:yellow;
top: 20px;
}
html
<div id="father">
我是父元素
<div id="son"> 我是子元素</div>
</div>运行效果如下：
子元素 absolute 定位，父元素 relative 定位。
此时，父元素是相对于默认位置 （即 static 时的位置）进行偏移。即父元素的定位基点为父元素的默认位置。 而子元素是相对于父元素的位置进行偏移，即子元素的默认基点为 父元素。
注意，absolute 定位的元素会被"正常页面流"忽略，即在"正常页面流"中，该元素所占空间为零，周边元素不受影响。
上述运行可以看出，子元素可以叠加在父元素上面，也没有影响父元素的位置进行变化。
3.3 fixed属性值------固定定位
fixed 表示，相对于视口（viewport，浏览器窗口）进行偏移，即定位基点是浏览器窗口。这会导致元素的位置不随页面滚动而变化，好像固定在网页上一样。
它如果搭配 top、bottom、left、right 这四个属性一起使用，表示元素的初始位置是基于视口计算的，否则初始位置就是元素的默认位置。
css
#fixed_el {
position: fixed;
top: 2px;
background-color:red;
}
#text {
background-color:yellow;
}
html
<div id="fixed_el">我是fixed_el</div>
<div id="text"> 我用来测试它是不是被固定</div>
<div id="text"> 我用来测试它是不是被固定</div>
<div id="text"> 我用来测试它是不是被固定</div>
<div id="text"> 我用来测试它是不是被固定</div>
<div id="text"> 我用来测试它是不是被固定</div>
可以看到 fixed 定位的元素是相对于浏览器窗口进行偏移的，元素始终在视口的顶部，不随网页的滚动而变化。由于篇幅不够。如果能够滑动，看起来会更直观。
4. sticky属性值------滚动索引
sticky跟前面四个属性值都不一样，它会产生动态效果，很像relative和fixed的结合：一些时候是relative定位（定位基点是自身默认位置），另一些时候自动变成fixed定位（定位基点是视口）。
因此，它能够形成"动态固定"的效果。比如，网页的搜索工具栏，初始加载时在自己的默认位置（relative定位） 
页面向下滚动时，工具栏变成固定位置，始终停留在页面头部（fixed定位）。
等到页面重新向上滚动回到原位，工具栏也会回到默认位置。
sticky 生效的前提是，必须搭配 top、bottom、left、right 这四个属性一起使用，不能省略，否则等同于 relative 定位，不产生"动态固定"的效果。原因是这四个属性用来定义"偏移距离"，浏览器把它当作 sticky 的生效门槛。
它的具体规则是，当页面滚动，父元素开始脱离视口时（即部分不可见），只要与 sticky 元素的距离达到生效门槛， relative 定位自动切换为 fixed 定位；等到父元素完全脱离视口时（即完全不可见）， fixed 定位自动切换回 relative 定位。
请看下面的示例代码。（注意，除了已被淘汰的 IE 以外，其他浏览器目前都支持 sticky 。但是，Safari 浏览器需要加上浏览器前缀 -webkit- 。）
css
#toolbar {
position: -webkit-sticky; /* safari 浏览器 */
position: sticky; /* 其他浏览器 */
top: 20px;
}参考链接 ：