首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

CSS_中的z-index(1)开题

2012-10-25 
CSS_中的z-index(一)开题最近需要做一个模仿 当当 京东 的纵向、横向导航效果页面。怎么做呢,又没有合适的控

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版本:CSS2JavaScript 语法:object.style.zIndex="1"

?

更多的详细还是看手册吧~

?

另外发现这个地方很不错,一个学习w3c的好地方~

http://www.w3school.com.cn/css/pr_pos_z-index.asp

?

热点排行