1.要想理解层叠上下层，首先要先从文档流和盒模型说起
文档流
在CSS中，文档流是一个很基础也是很重要的一个概念。很多时候她被称为Document Flow，但在CSS的标准被称为Normal Flow，即普通流或常规流。大家更喜欢称之为文档流。那么CSS的文档流是怎么一回事呢？
在HTML中任何一个元素其实就是一个对象，也是一个盒子。在默认情况下它是按照出现的先后顺序来排列，而这个排列的顺序就是文档流。
而页面中的文档流主要包括三部分：块、内联、内联块
流动方向
- inline元素从左到右，到达页面最右边才会换行
- block元素从上到下，每一个都会另起一行
- inline-block元素也是从左到右，但是但页面最右面的宽度不够存放一个inline-block元素的宽度，整个元素就会一起换行
宽度
- inline元素的宽度为内部inline元素的和，不能用width指定
- block元素的宽度默认自动计算宽度，可以用width指定
- inline-block元素的宽度为内部元素的和,可以用width指定
高度
- inline元素的高度是有line-height间接确定的，与height无关
- block元素的高度有内部文档流元素决定，可以设置height
- inline-block元素的高度与block类似
盒模型
在一个文档中，每一个元素都被抽象成一个盒子，每一个盒子又包括四部分(从内到外):内容(content)，内填充(padding)，边框(border)，外边距(margin)。
1.我们一直都知道一个盒模型的background包括content和padding，那下面我们考虑一下，background的范围是从border的外边缘围成的区域还是从border的内边缘围成的区域呢？
代码验证：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
div {
width: 200px;
height: 200px;
background: pink;
border: 10px solid rgba(255, 255, 255, 0.5);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果图：
所以能看出background的范围是从border的外边缘围城的区域，也得出一个结论：border是在background上面。
2.下面我们试着想一下从右边看这个盒子是什么样的，谁在上面，谁在下面，下面我们代码验证一下
代码验证：
