最近工作不是特别忙，都在逛博客园查看并学习前端语言js、jquery、css等，在园里看到一篇边框高亮的文章，觉得挺有意思，就跟着写了一下玩玩，原文链接

 

最开始照着上面的代码code一遍，IE、Google浏览器运行正常，

 

接着就是研究每一句代码和布局的含义（新手，哈哈），通过不断的修改布局中各个属性对比效果变化来理解每个属性的意义（个人比较喜欢这种学习方法）

 

在修改到.box li a(每个数字所在的小格子)中的position布局时，发现使用static时，布局效果一直，但是hover的黑色边框会出现部分被覆盖的现象，

然后我翻阅各种资料，查看css中margin border padding等边界相关的属性，都没有找到其中的奥秘。

又跟代码发现，不管我将position设置成relative还是static，元素本身的边框都是会出现部分被压盖的现象，那为什么设置成relative的时候，hover中的边界则不会被压盖。由于接触js和css时间不久，对很多属性认识都不够深刻，我只得一个一个的属性去排除。

 

终于，在我修改每个元素及其hover的z-index属性时，发生了些许变化。

在relative下，如果hover的z-index值大于元素本身的z-index值，那么hover将会显示整个边框，不会被压盖；反之则会被压盖，这时的压盖正好和元素本身的边框显示效果（跟代码时，对象的显示效果）一致。

但是在static下，hover始终被压盖，似乎z-index不起作用了。

这时候，算是有些线索了，随后我在百度了一下，发现z-index在static下是不起作用的！

 

最后，总结一下此次问题的关键属性，

z-index属性作用：分层顺序，z-index值越大，该元素的显示层越靠上。

 

第一次写关于js和css的文章，有理解不对的地方，希望各位指正，大家互相交流。源码去原链接查看，代码很简单，顺便帮原文作者做个小广告。