CSS样式表中Z-index属性的一些特征:

以下内容转载自nealjin.

 

Z-index是什么意思?在CSS2.0中,Z-index 属性用来设置元素的堆叠顺序,拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面(Z轴)。

1、CSS样式表中Z-index属性的一些特征:

  • Z-index属性的默认值是0
  • 元素可拥有负的 z-index 属性值,如z-index:-1
  • Z-index属性无继承性
  • Z-index属性JavaScript 使用语法:object.style.zIndex=”1″
  • 几乎所有主流浏览器都支持 Z-index 属性

2、CSS样式表中Z-index属性的使用方法:
样式代码:.box
{position:absolute;
left:0px;
top:0px;
z-index:-1}


css样式表中z-index属性的使用

3、CSS样式表中Z-index属性使用的注意事项:
(1)Z-index仅对定位元素有效(如position:relative\absolute\float);

(2)Z-index只可比较同级元素。这也许是大家很容易忽视的问题,我就卡在了这里。也就是说,Z-index只能对同级元素进行分层展示;

(3)Z-index的作用域:假设A和B两个元素都设置了定位(相对定位、绝对定位、一个相对一个绝对定位都可以),且是同级元素,样式为:.boxA{z-index:4}
.boxB{z-index:5}

于是,不难看出,元素B的层级要高于元素A,在此需要指出的是,A元素下面的子元素的层级也同样都低于B元素里的子元素,即使你将A元素里的子元素设为z-index:9999;同理元素B里的子元素,即使是设的z-index:1它照样比元素A的层级要高;

(4)这个属性不会作用于窗口控件,如select对象。

(5)在父元素的子元素中设置Z-index的值,可以改变子元素之间的层叠关系

(6)子元素的Z-index值不管是高于父元素还是低于父元素,

    只要他们的z-index值是大于等于0的数,他们都会显示在父元素之上,即压在父元素上。

    只要他们的值是小于0的数,则显示在父元素之下!

posted @ 2014-07-21 16:27  495157297  阅读(972)  评论(0编辑  收藏  举报