定位允许从正常的文档流布局中取出元素，并使它们具有不同的行为。
1、文档流
1）单个元素
①默认情况下，块级元素的内容宽度是其父元素的宽度的100％，并且与其内容一样高。
②不能对内联元素设置宽度或高度。（除非，将其设置为类似块级元素 display: block;）
2）元素之间
①默认情况下，块级元素在视口中垂直布局——每个都将显示在上一个元素下面的新行上，并且它们的外边距将分隔开它们。
②它们互相之间以及任何相邻（或被包裹）的文本内容位于同一行上
；没有空间，那么溢流的文本或元素将向下移动到新行。
2、介绍定位
1）静态定位
每个元素获取的默认值——意味着“将元素放入它在文档布局流中的正常位置。
2）相对定位
与静态定位非常相似，占据在正常的文档流中，但可以修改它的最终位置，包括让它与页面上的其他元素重叠。
需要使用top，bottom，left和right属性来修改元素的位置。
.positioned {
position: static;
position: relative;
background: yellow;
top: 30px;
left: 30px;
}
3）绝对定位
绝对定位的元素不再存在于正常文档布局流程中。相反，它坐在它自己的层独立于一切。
可以创建不干扰页面上其他元素的位置的隔离的UI功能——例如弹出信息框和控制菜单，翻转面板，可以在页面上的任何地方拖放的UI功能等。
指定元素应距离每个包含元素的边的距离。
4）定位上下文
默认情况下，<html>元素是绝对定位元素的“包含元素”。
改变定位上下文——绝对定位的元素相对于其定位的元素。
.body{position: relative;}
5)介绍 z-index
网页也有一个z轴——一条从屏幕表面到你的脸（或者在屏幕前面你喜欢的任何其他东西）的虚线。
z-index 值影响定位元素位于该轴上的位置——正值将它们移动到堆栈上方，负值将它们向下移动到堆栈中。默认情况下，定位的元素都具有z-index为auto，实际上为0
。
添加到 p:nth-of-type(1) 规则中：z-index: 1;
注：z-index只接受无单位索引值。
6）固定定位
固定定位固定元素则是相对于浏览器视口本身。
可以创建固定的有用的UI项目，如持久导航菜单。
h1 {
position: fixed;
top: 0;
width: 500px;
margin: 0 auto;
background: white;
padding: 10px;
}定位的标题不再出现在文档流中
。