网上有很多这方面的教程，但不是苦涩难懂就是从哪copy过来的，反正很长一段时间我是没看懂，时间长了也没打算去研究了，主要原因是，基本上很少会遇到那些问题（所以说啊，要是没有研究精神的才懒得管它）。但自从开始研究CSS以后就一发不可收拾，所以打算把CSS一系列的东西都给研究一遍，当然能研究懂自然是好的，不能就当自娱自乐了。话说这个层叠顺序和堆栈上下文没啥用对吧，你看我就是不学它，平时也没出什么问题。 …… 想让它出问题也很简单，不过既然你都说没用了，也就不打算告诉你了。
本篇属于短话长说型，前半部分比较简单，但不看会影响后面你是否有勇气看下去，建议全看，但如只是想了解一下，可以只看总结部分，但都看你自己。
层叠顺序和层叠上下文是两个概念，但它们又有着密不可分的关系，层叠顺序很简单^_^，认真思考即可，而堆栈上下文更是不值一提，我只需要迁根红线你就懂了，所有说，都太简单。第一段说难懂，主要是有了这篇文章，才化解位移。废话少说，看剑。
在考虑到两个元素可能重合的情况下，W3C提出了层叠这个概念，层叠是指如何去层叠另一个元素，比如两个元素重合的时候应该让谁在前面，谁在后面。那它们的规则又是什么？先来试水。
层叠顺序篇
当两个元素都是块级元素时，默认情况越后面的元素层级越高
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<style> div{ width:100px; height:100px; } .item1{ color:red; background-color:pink; } .item2{ margin-top:-100px; background-color:orange; } </style> <div class="item1">item11111</div> <div class="item2">item22222</div> |
可以看到item2把item1给盖住了，说明越后面的元素层级越高，另外item1的文字还是隐隐约约的可以看到，这说明了背景的层级比文字小。
另外我们可以这样
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<style> div{ width:100px; height:100px; } .item1{ color:red; } .item2{ margin-top:-100px; } </style> <div class="item1">item11111</div> <div class="item2"></div> |
可以看到好像没有item2这个元素一样，主要原因是，在没有设置背景的情况下，元素的背景是透明的(transparent)，并且允许后面的元素透上来。
在这种条件下，你会发现一个很搞笑的事，如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<style> div{ width:100px; height:100px; } .item1{ color:red; } .item2{ background-color:orange; margin-top:-100px; } </style> <div class="item1">我是item2</div> <div class="item2"></div> |
如果不看代码，就好像这段代码真的是item2的。
当两个元素为行内块时
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<style> div{ display:inline-block; width:100px; height:100px; } .item1{ background-color:pink; } .item2{ background-color:orange; margin-left:-108px; } </style> <div class="item1">item1111</div> <div class="item2">item2</div> |
也是后一个元素的层级比前一个元素的层级高，不过和两个块级元素不同的是行内块元素的背景层级比文字高。
当两个元素为行内元素时
网上有很多这方面的教程，但不是苦涩难懂就是从哪copy过来的，反正很长一段时间我是没看懂，时间长了也没打算去研究了，主要原因是，基本上很少会遇到那些问题（所以说啊，要是没有研究精神的才懒得管它）。但自从开始研究CSS以后就一发不可收拾，所以打算把CSS一系列的东西都给研究一遍，当然能研究懂自然是好的，不能就当自娱自乐了。话说这个层叠顺序和堆栈上下文没啥用对吧，你看我就是不学它，平时也没出什么问题。 …… 想让它出问题也很简单，不过既然你都说没用了，也就不打算告诉你了。
本篇属于短话长说型，前半部分比较简单，但不看会影响后面你是否有勇气看下去，建议全看，但如只是想了解一下，可以只看总结部分，但都看你自己。
层叠顺序和层叠上下文是两个概念，但它们又有着密不可分的关系，层叠顺序很简单^_^，认真思考即可，而堆栈上下文更是不值一提，我只需要迁根红线你就懂了，所有说，都太简单。第一段说难懂，主要是有了这篇文章，才化解位移。废话少说，看剑。
在考虑到两个元素可能重合的情况下，W3C提出了层叠这个概念，层叠是指如何去层叠另一个元素，比如两个元素重合的时候应该让谁在前面，谁在后面。那它们的规则又是什么？先来试水。
层叠顺序篇
当两个元素都是块级元素时，默认情况越后面的元素层级越高
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<style> div{ width:100px; height:100px; } .item1{ color:red; background-color:pink; } .item2{ margin-top:-100px; background-color:orange; } </style> <div class="item1">item11111</div> <div class="item2">item22222</div> |
可以看到item2把item1给盖住了，说明越后面的元素层级越高，另外item1的文字还是隐隐约约的可以看到，这说明了背景的层级比文字小。
另外我们可以这样
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<style> div{ width:100px; height:100px; } .item1{ color:red; } .item2{ margin-top:-100px; } </style> <div class="item1">item11111</div> <div class="item2"></div> |
可以看到好像没有item2这个元素一样，主要原因是，在没有设置背景的情况下，元素的背景是透明的(transparent)，并且允许后面的元素透上来。
在这种条件下，你会发现一个很搞笑的事，如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<style> div{ width:100px; height:100px; } .item1{ color:red; } .item2{ background-color:orange; margin-top:-100px; } </style> <div class="item1">我是item2</div> <div class="item2"></div> |
如果不看代码，就好像这段代码真的是item2的。
当两个元素为行内块时
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<style> div{ display:inline-block; width:100px; height:100px; } .item1{ background-color:pink; } .item2{ background-color:orange; margin-left:-108px; } </style> <div class="item1">item1111</div> <div class="item2">item2</div> |
也是后一个元素的层级比前一个元素的层级高，不过和两个块级元素不同的是行内块元素的背景层级比文字高。
