mozilla
您的搜索结果

    Adding z-index

    « CSS «理解z-index

    使用 z-index

    在第一个例子 Stacking without z-index中, 我们描述了默认的摆放顺序。 当你需要指定不同的排列顺序时, 只要给元素指定一个z-index的数值就可以了。 

     

    该属性必须是整数(正负均可), 它体现了元素在z轴的位置。 如果你对z轴体系不了解, 你也可以把它理解成“层叠”, 每个层都有一个顺序数, 顺序数大的层在上面, 小的在下面。 

    注意!z-index只对指定了 positioned属性的元素有效。

    • 底层: 距离观察者最远
    • ...
    •  -3 层
    •  -2 层
    •  -1 层
    •  0 层 默认层
    •  1 层
    •  2 层
    •  3 层
    • ...
    • 顶部: 最接近观察者

    注释:

    • 当没有指定z-index的时候, 所有元素都在会被渲染在默认层(0层)
    • 当多个元素的z-index属性相同的时候(在同一个层里面),那么将按照 Stacking without z-index 中描述的规则进行布局。 

    在下一个例子中, 所有的层都是用z-index进行排序的。 元素div#5 的z-index无效, 因为他没有被指定position属性。 

    Example of stacking rules modified using z-index

    Example source code

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head><style type="text/css">
    
    div {
       opacity: 0.7;
       font: 12px Arial;
    }
    
    span.bold { font-weight: bold; }
    
    #normdiv {
       z-index: 8;
       height: 70px;
       border: 1px dashed #999966;
       background-color: #ffffcc;
       margin: 0px 50px 0px 50px;
       text-align: center;
    }
    
    #reldiv1 {
       z-index: 3;
       height: 100px;
       position: relative;
       top: 30px;
       border: 1px dashed #669966;
       background-color: #ccffcc;
       margin: 0px 50px 0px 50px;
       text-align: center;
    }
    
    #reldiv2 {
       z-index: 2;
       height: 100px;
       position: relative;
       top: 15px;
       left: 20px;
       border: 1px dashed #669966;
       background-color: #ccffcc;
       margin: 0px 50px 0px 50px;
       text-align: center;
    }
    
    #absdiv1 {
       z-index: 5;
       position: absolute;
       width: 150px;
       height: 350px;
       top: 10px;
       left: 10px;
       border: 1px dashed #990000;
       background-color: #ffdddd;
       text-align: center;
    }
    
    #absdiv2 {
       z-index: 1;
       position: absolute;
       width: 150px;
       height: 350px;
       top: 10px;
       right: 10px;
       border: 1px dashed #990000;
       background-color: #ffdddd;
       text-align: center;
    }
    
    </style></head>
    
    <body>
    
    <br /><br />
    
    <div id="absdiv1">
       <br /><span class="bold">DIV #1</span>
       <br />position: absolute;
       <br />z-index: 5;
    </div>
    
    <div id="reldiv1">
       <br /><span class="bold">DIV #2</span>
       <br />position: relative;
       <br />z-index: 3;
    </div>
    
    <div id="reldiv2">
       <br /><span class="bold">DIV #3</span>
       <br />position: relative;
       <br />z-index: 2;
    </div>
    
    <div id="absdiv2">
       <br /><span class="bold">DIV #4</span>
       <br />position: absolute;
       <br />z-index: 1;
    </div>
    
    <div id="normdiv">
       <br /><span class="bold">DIV #5</span>
       <br />no positioning
       <br />z-index: 8;
    </div>
    
    </body></html>
    

    See also

    Original Document Information

    文档标签和贡献者

    此页面的贡献者有: ArthasTree, teoli
    最后编辑者: teoli,