HTML中的三种布局方式：标准流、浮动、定位
两大元素：
块级元素：div、table、H1~H6、有序无序列表（ol、ul、li）、p段落等
内联元素：a、span、img、input等
块级元素单独占一行，内联元素会从左到右依次排列在一行。
常用的定位position可分为以下四种:
static: 元素的定位默认值。元素出现在正常的文档流中。top, left, right, bottom,z-index声明无效，言意上对于static的元素是没有任何效果。
relative: 相对定位。通过top, left, right, bottom相对于其正常位置（标准流中的位置）进行定位。定位为relative的元素出现在正常的文本流中，即其在文本流中的位置依然存在。
absolute: 绝对定位。相对于除static定位以外（即relative, absolute, fixed）的第一个父元素进行定位。可通过top, left, right, bottom进行定位，而其层叠通过z-index属性定义。定位absolute的元素脱离在正常文本流，但与relative的区别在于其在文本流中的位置不存在。
fixed: 绝对定位，相对于浏览器窗口进行定位，可通过top, left, right, bottom进行定位，不受制于父元素。
relative与absolute的主要区别：
relative定位的层总是相对于其最近的父元素，无论父元素采用什么定位方式。
absolute定位的层总是相对于最近的除了static定位的父层元素进行定位。如果最近的父元素层中没有绝对或者相对定位，则将其相对于body进行定位。
原文地址：https://www.cnblogs.com/wangzhaofang/p/8361427.html