开始学前端的时候，觉得CSS倍儿简单好玩。可自打工作以来，发现自己总是出现CSS上面遇到难题。原因在于从来没有系统的学过这门知识，掌握的也都只是常用的，所以一旦出现意外情况，就两眼一抹黑，找不到解决方案了。所以要想成为一名合格前端，CSS知识也得抓紧补起来。本篇主要记录一些零散的CSS知识，系统学习笔记会额外开一片博文记录。

z-index失效问题

首先需要知道：

z-index属性只作用在被定位了的元素上。所以如果在一个没被定位的元素上使用z-index的话，是不会有效果的。
同一个父元素下的元素的层叠效果会受父元素的z-index影响，如果父元素的z-index值很小，那么子元素的z-index值很大也不起作用。

失效的情况：

父标签 position属性为relative
问题标签无position属性（不包括static）
问题标签含有浮动(float)属性
问题标签的祖先标签的z-index值比较小

解决方案：

position:relative改为position:absolute；
浮动元素添加position属性（如relative，absolute等）；
去除浮动。
提高父标签的z-index值

文字换行

注意：设置强制将英文单词断行，需要将行内元素设置为块级元素。

强制不换行
p { white-space:nowrap; }
自动换行
p { word-wrap:break-word; }
强制英文单词断行
p { word-break:break-all; }