CSS_中的z-index（1）开题
日期：2014-05-17 浏览次数：20789 次
CSS_中的z-index（一）开题
最近需要做一个模仿 当当 京东 的纵向、横向导航效果页面。
怎么做呢，又没有合适的控件，框架来用。
自己从0开始写的时候发现，z-index，真是一个不错的东西啊~有些高难度设计，必须用到她~
?
连续两个晚上加班加点，终于还是没有搞定。今天重新学习一下z-index的原理，okay搞定啦！
磨刀不误砍柴工啊~
?
所以得常学习，常总结。
?
总结本次设计在z-index上犯错的地方：
我总是想在动态hover过程中，用另外一个层A “遮住” 层A1，这样就可以A1的border就看不见了，从而达到想要的效果。
?
问题出在： A1是A的子元素，在CSS中，如果A和A1都使用了position，那么A是无法放在其父亲层的后面的。而我折腾了很多方法都意图做到一个本不可以的事情。
?
解决方案： 重新设计一个顶层父亲层X，把要用z-index相互覆盖的层放在一个父亲层下面使得A和A1成为兄弟层。worked！
?
定义和用法
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注释： 元素可拥有负的 z-index 属性值。
注释： Z-index 仅能在定位元素上奏效（例如 position:absolute;）！
说明
该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。
| auto |
| no |
| CSS2 |
| object .style.zIndex="1" |
?
更多的详细还是看手册吧~
?
另外发现这个地方很不错，一个学习w3c的好地方~
http://www.w3school.com.cn/css/pr_pos_z-index.asp
?
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
