关于css中的z-index 属性 本是古典 何须时尚 2022-08-06 08:21 118阅读 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>
还没有评论,来说两句吧...