最近一直在写静态网页，搭配sass和自己造的轮子果然速度有了长足的进步，不过在实战中遇到某些css问题算查缺补漏吧。

z-index

属性很简单是层叠顺序的控制，但是我在实际开发的过程中发现不起作用了，原来是没有创建层叠上下文。如果有层叠上下文，就有这样的顺序.
层叠上下文的创建:

1.皇亲国戚派：页面根元素天生具有层叠上下文，称之为“根层叠上下文”。
2.科考入选派：z-index值为数值的定位元素的传统层叠上下文。
3.其他当官途径：其他CSS3属性。

其中3包括：
z-index值不为auto的flex项(父元素display:flex|inline-flex).
元素的opacity值不是1.
元素的transform值不是none.
元素mix-blend-mode值不是normal.
元素的filter值不是none.
元素的isolation值是isolate.
will-change指定的属性值为上面任意一个。
元素的-webkit-overflow-scrolling设为touch.

然后我写了一个demo发现真的是这样z-index只会在层叠上下文创建后才会有用。然后在ie6、7上会有一个bug详见 IE6 IE7 CSS z-index Bug
参考链接
不由得感叹大牛成功都是有道理的，想快速的做学问是不行的。

text-align

text-align属性可以有效作用于inline/inline-block水平的元素。
然后我看到张老师的一篇文章，就停不下来了。
相关链接

BFC

BFC元素特性表现原则就是，内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素。所以，避免margin穿透啊，清除浮动什么的也好理解了

• float的值不为none。
• overflow的值为auto,scroll或hidden。
• display的值为table-cell, table-caption, inline-block中的任何一个。
• position的值不为relative和static。

顺带做做清除浮动的例子。

###