层叠顺序表
上一篇文章已经证实了block元素的层级低于inline/inline-block，而其他的还没有细说，所以这次就来说一说浮动元素的层级和z-index有值的时候的情况。
- 为什么需要这个层叠顺序？（规范元素重叠时的呈现规则，浮动元素和和块级元素用于布局，背景用于装饰，而很明显inline用于内容的显示，其重要性的先后关系就很明显了）
-
为什么是这个顺序?(以内容为主，方便显示)
- 浮动元素和inline元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
img{
float: left;
margin-right: -50px;
}
.txt{
color: #aaa;
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<img src="../img/preview.jpg">
<span class="txt"> hhhhhhhhhhhhhhhhhhh</span>
</body>
</html>
结论：很明显，内容覆盖了浮动的图片
那我再给Inline加上背景呢？按照上面那个看起来diao的不行的7阶层叠水平，是不是浮动元素就在背景上面了，那好，看下面↓
修改后的代码：
.txt{
color: #aaa;
font-size: 20px;
font-weight: bold;
background: lightgreen;
}
效果：
诶？这是怎么肥四？好，这就要说到层叠上下文的问题了。怎么说呢？总感觉有点像是老妈的地位比我高，顺带着老妈养的喵星人就不能与我的喵相提并论的感觉。具体放到下一篇讲吧，一篇放太多很难受。
好了，不知道说什么好，大家记得吃中午饭~
