z-index的技巧性运用

在前端的学习中，往往会遇到很多问题，特别是在最初学写Html的时候，布局总会有一些小问题，今天我就给大家讲一个我在做项目的时候运用到的一个小技巧。

上面是一个小的演示，执行出的效果如下：

按正常的理论应是鼠标移入收藏按钮就弹出一个收藏列表，可实际执行的时候并没有实现理论效果。最后是怎样解决的呢？就是运用了z-index这个属性。让一个元素加上{z-index：n（n=任何数字）;}能让这个元素的层级更高，层级变高之后就会遮住原来平面上的元素：

通过这种方法就可以让本该显示在“理论位置”的元素变成显示“实际位置”的元素，是不是很方便。我们在布局的时候肯定会用到很多插件等等，有些插件自带的属性本身就有z-index属性，那么你就会很麻烦，但只要你用这个属性设置更高的层级去改变你需要显示的元素，就会减少很多不必要的麻烦。