背景

发现这个问题是在图片上定位了一个删除按钮，当我用opacity属性对图片进行透明化处理的时候，发现删除按钮不管用了，最后发现删除按钮是被图片覆盖了，究其原因是因为opacity这个属性造成的层级变化。

1. 我发现含有opacity属性的元素层级会比其他元素的层级高，这时候z-index是不起作用的，opacity会一直高于其他元素的层级。
2. 给其他元素加上position属性，会使该元素跟opacity处在同一层级之上，这时候你再给元素附加z-index就可以起作用了。

CSS3：图片的高斯模糊效果

最近项目中需要预览视频中加马赛克的效果（高斯模糊），于是找到了css3的一个属性filter来进行高斯模糊

文字居中

垂直居中（vertical-align）

我们都知道有这么一个属性可以让图片，文本等在元素中垂直居中

1

vertical-align:middle;

vertical-align值有很多，常用的就是middle，bottom，text-bottom等，我们先说middle。

vertical-align时而没效果

然而真实使用的时候，我们会发现这个属性“时灵时不灵”，有些情况下我们加了这个属性之后仍然不见img或者text有任何的变化。那是因为vertical-align只作用在inline-block或者inline，还有table-cell等元素内。同时这两种还有所不同。