您的位置:首页 > Web前端 > css > 正文

CSS中 z-index 的用法

更多 时间:2013-11-12 类别:Web前端 浏览量:3258

CSS中 z-index 的用法

CSS中 z-index 的用法

语法:

z-index: auto,数值,inherit。

 

参数:
 

数值:

数值即是盒子在当前的堆叠环境中的堆叠层次。这个盒子也会建立一个新的堆叠环境。

auto:

生成的盒子的堆叠层次在当前堆叠环境中是0。除非它是根元素,否则它不会建立一个新的堆叠环境。

inherit:

规定应该从父元素继承 z-index 属性的值。
 

说明:

检索或设置对象的层叠顺序。
如两个绝对定位对象的此属性具有同样的值,那么将依据它们在HTML文档中声明的顺序层叠
对应的脚本特性为zIndex。请参阅我编写的其他书目。

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

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


 Z-index示意图

 

 

Z-index实例

Z-index 用于将在一个元素放置于另一元素之后。

  •  
  • HTML 代码   复制
  • 
    <html>
    <head>
    <style type="text/css">
    img.x
    {
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1
    }
    </style>
    </head>
    
    <body>
    <h1>这是一个标题</h1>
    <img class="x" src="/i/eg_mouse。jpg" /> 
    <p>默认的 z-index 是 0。Z-index -1 拥有更低的优先级。</p>
    </body>
    
    </html>
    
    		
  •  

    效果图:

  •  
  •  
  • Z-index 用于将在一个元素放置于另一元素之前。
  •  
  •  
  • HTML 代码   复制
  • 
    <html>
    <head>
    <style type="text/css">
    img.x
    {
    position:absolute;
    left:0px;
    top:0px;
    z-index:1
    }
    </style>
    </head>
    
    <body>
    <h1>这是一个标题</h1>
    <img class="x" src="/i/eg_mouse。jpg" /> 
    <p>默认的 z-index 是 0。Z-index 1 拥有更高的优先级。</p>
    </body>
    
    </html>
    
    			
  •  

    效果图

     

    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的数,则显示在父元素之下!

    标签:CSS z-index
    您可能感兴趣