双十一刚过，又穷了，这辈子剁手是不可能剁手了，只能像这样写点代码，喝点咖啡，做一只穷酸的单身狗
后来居上原则
- 两个都是块级元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.level1{
width: 100px;
height: 100px;
background: red;
margin-bottom: -100px;
}
.level2{
width: 100px;
height: 100px;
background: lightblue;
color: #fff;
}
</style>
</head>
<body>
<div class="level1">hhhhhhhhhh</div>
<div class="level2">hhhhhh</div>
</body>
</html>
- 两个都是inline-block元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
display: inline-block;
width: 100px;
height: 100px;
}
.level1{
background: red;
}
.level2{
background: lightblue;
margin-left: -105px;
color: #fff;
}
</style>
</head>
<body>
<div class="level1">hhhhhhhhhh</div>
<div class="level2">hhhhhh</div>
</body>
</html>
- 两个都是inline元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
display: inline;
}
.level1{
background: red;
}
.level2{
background: lightblue;
margin-left: -105px;
color: #fff;
}
</style>
</head>
<body>
<div class="level1">hhhhhhhhhh</div>
<div class="level2">hhhhhhhhhh</div>
</body>
</html>
结论： 大致由上面的效果图 可以看出，如果都是block元素，那么被遮盖层的文字是可以隔着遮盖层的背景颜色透上来，而如果是inine-block元素，则这一结论不成立，无论是背景还是文字都可以完美地遮住。
- 如果用block元素来遮盖inline-block元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.level1{
display: inline-block;
width:100px;
height:100px;
background: red;
color: #000;
}
.level2{
display: block;
width: 150px;
height: 150px;
background: lightblue;
margin-top: -100px;
color: #fff;
}
</style>
</head>
<body>
<div class="level1">habababababhiiiiiii<br>jjjjjhjhjhjhj</div>
<div class="level2">hhhhhhhhhhhhhhhh</div>
</body>
</html>
结论： 后面块级元素中的文字可耻地透了上来，而背景颜色还是很窝囊的被inline-block元素的背景颜色遮盖了
- 如果用inline-block元素遮盖block元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.level1{
display: block;
width:100px;
height:100px;
background: red;
color: #000;
margin-bottom: -100px;
}
.level2{
display: inline-block;
width: 150px;
height: 150px;
background: lightblue;
color: #fff;
}
</style>
</head>
<body>
<div class="level1">habababababhiiiiiii<br>jjjjjhjhjhjhj</div>
<div class="level2">hhhhhhhhhhhhhhhh</div>
</body>
</html>
结论： 可以看到inline-block的文字和背景都完美的遮盖住了block元素的文字和背景
最后总结出一句，block无论是去遮盖inline系列还是自身被inline系列遮盖，都只会出现两种情况，自己被完全遮盖，或者自己的背景颜色被遮盖，文字透了上来。 这就解释了块级元素在层叠顺序表中排行倒数的原因了，它本身层级就比inline系列低，当然盖不住，那为什么文字会透上来呢？我参考了一下张鑫旭老师在慕课的一章css课程，大致是这样，因为文字本身就是Inline元素，当然层级就很高了，再遵从后来居上原则，自然就会产生后面一个元素的文字覆盖前一个元素的文字的现象了。
