层的显示顺序问题

语法:
z-index : auto | number
取值:

auto :默认值。遵从其父对象的定位
number :无单位的整数值。可为负数

说明:
检索或设置对象的层叠顺序。
较大 number 值的对象会覆盖在较小 number 值的对象之上。如两个绝对定位对象的此属性具有同样的 number 值,那么将依据它们在HTML文档中声明的顺序层叠。对于未指定此属性的绝对定位对象,此属性的 number 值为正数的对象会在其之上,而 number 值为负数的对象在其之下。设置参数为 null 可以移除此属性。
此属性仅仅作用于 position 属性值为 relative absolute 的对象。
这个属性不会作用于窗口控件,如 select 对象。
在IE5.5+中, iframe 对象开始支持此属性。而在之前的浏览器版本中, iframe 对象是窗口控件,会忽略此属性。此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 zIndex
< 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:lightskyblue;padding:6px;position:absolute;z-index:3;left:150px;top:25px;z-index:5;}
#idCodeDiv
{width:100%;padding:4px;font-family:verdana,tahoma;margin:12px 0px 0px 0px;background-color:#EEEEEE;font-weight:bold;}
</ style >



< 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 >  
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值