关于css中的z-index 属性

本是古典何须时尚 2022-08-06 08:21 181阅读 0赞

检索或设置对象的层叠顺序。  
较大  *number* 值的对象会覆盖在较小  *number* 值的对象之上。如两个绝对定位对象的此属性具有同样的  *number* 值，那么将依据它们在HTML文档中声明的顺序层叠。对于未指定此属性的绝对定位对象，此属性的  *number* 值为正数的对象会在其之上，而  *number* 值为负数的对象在其之下。设置参数为  **null** 可以移除此属性。  
此属性仅仅作用于  position 属性值为  **relative** 或  **absolute** 的对象。  
这个属性不会作用于窗口控件，如  **select** 对象。  
在IE5.5+中，  **iframe** 对象开始支持此属性。而在之前的浏览器版本中，  **iframe**  对象是窗口控件，会忽略此属性。此属性对于  **currentStyle** 对象而言是只读的。对于其他对象而言是可读写的。  
对应的脚本特性为  **zIndex** 。  
  
  
一下是 实例代码   
  
<!doctype html>  
<html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <meta name="Generator" content="EditPlus庐">  
        <meta name="Author" content="">  
        <meta name="Keywords" content="">  
        <meta name="Description" content="">  
        <title>z-index</title>  
  
        <style>  
            \#idParentDiv  
            \{  
                width: 100%;  
                height: 120px;  
                padding: 6px;  
                background-color: buttonshadow;  
                position: relative;  
            \}  
            \#idDiv1  
            \{  
                width: 160px;  
                height: 80px;  
                background-color: \#FFD700;  
                padding: 6px;  
                position: absolute;  
                z-index: 3;  
                left: 9px;  
                top: 9px;  
                z-index: 6;  
            \}  
            \#idDiv2  
            \{  
                width: 120px;  
                height: 80px;  
                background-color: thistle;  
                padding: 6px;  
                position: absolute;  
                z-index: 3;  
                right: 9px;  
                bottom: 9px;  
                z-index: 4;  
            \}  
            \#idDiv3  
            \{  
                width: 140px;  
                height: 80px;  
                background-color: red;  
                padding: 6px;  
                position: absolute;  
                z-index: 3;  
                left: 150px;  
                top: 25px;  
                z-index: 6;  
            \}  
            /\*\#idCodeDiv  
            \{  
                width: 100%;  
                padding: 4px;  
                font-family: verdana, tahoma;  
                margin: 12px 0px 0px 0px;  
                background-color: \#EEEEEE;  
                font-weight: bold;  
            \}\*/  
        </style>  
  
    </head>  
    <body>  
        <div id=idParentDiv>  
            <div id="idDiv1">  
                <img src="images/rdl\_body3.jpg" style="border:1px solid \#FFFFFF;">  
                <br>  
                z-index : 6 ;  
            </div>  
            <div id="idDiv2">  
                <img src="images/rdl\_body1.jpg" style="border:1px solid \#FFFFFF;">  
                <br>  
                z-index : 4 ;  
            </div>  
            <div id="idDiv3">  
                <img src="images/rdl\_body2.jpg" style="border:1px solid \#FFFFFF;">  
                <br>  
                z-index : 5 ;  
            </div>  
        </div>  
  
    </body>  
</html>