css叠层_css之层叠上下文和层叠顺序

大家在写网页的时候会不会经常遇到莫名奇妙的样式问题，比如谁覆盖了谁。也找不出原因，为什么z-index高的却没有覆盖掉z-index低的元素呢？

带着这些疑问。我做了个小实验。代码如下：

}.son-red{width:200px;height:100px;background-color:red;display:inline-block;

}.subson-yellow{height:50px;width:200px;background-color:yellow;

}.son-purple{width:200px;height:100px;background-color:purple;display:inline-block;margin-left:-50px;

}.mather-pink{width:300px;height:100px;background-color:pink;

}.daughter-blue{width:100px;height:50px;background-color:blue;margin-top:-20px;

}

我是孙子辈的我是孙子辈的我是孙子辈的