关于css中的z-index 属性

最新推荐文章于 2022-08-26 11:46:58 发布

u013803262

最新推荐文章于 2022-08-26 11:46:58 发布

阅读量557

点赞数

分类专栏： html+css 文章标签： css z-index

本文链接：https://blog.csdn.net/u013803262/article/details/42490759

版权

html+css 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

检索或设置对象的层叠顺序。
较大 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>

u013803262

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
关于css中的z-index 属性

检索或设置对象的层叠顺序。较大 number 值的对象会覆盖在较小 number 值的对象之上。如两个绝对定位对象的此属性具有同样的 number值，那么将依据它们在HTML文档中声明的顺序层叠。对于未指定此属性的绝对定位对象，此属性的 number 值为正数的对象会在其之上，而 number值为负数的对象在其之下。设置参数为 null 可以移除此属性。此属性仅仅作用于 posit
复制链接

扫一扫