层的显示顺序问题
2007-10-19 17:49
134 查看
语法:
z-index : 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>
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>
相关文章推荐
- ListView添加条目后,条目显示的顺序问题
- meta和title的顺序问题引起IE显示空白页
- DataTable实现列位置交换,用于SQL语句无法解决字段页面显示顺序问题
- MFC模式对话框与非模式对话框 消息处理顺序 与非模式对话框的焦点问题、显示、关闭以及交互问题
- 一个关于顺序显示记录的问题!!!
- Xcode编译策略之代码逻辑顺序不正确,变量不显示问题解决方案
- SVG渲染顺序及z轴显示问题(zIndex)
- DataTable实现列位置交换,用于SQL语句无法解决字段页面显示顺序问题
- NGUI下粒子显示顺序注意问题
- 问题:利用 C++的各种控制语句编写一个万年历程序。 要求:显示任何年份的日历,日历以月份顺序排列,每月以星期顺序排列,类似于一 般挂历上的格式。
- css float的代码顺序和html页面显示顺序的问题
- 今天 同一个Nav 左右button 替换不显示的问题 viewDidLoad, viewWillDisappear, viewWillAppear等区别及各自的加载顺序
- title 与 meta标签顺序问题,造成在IE和360浏览器下面显示为空白页的问题。
- DataTable实现列位置交换,用于SQL语句无法解决字段页面显示顺序问题
- 关于GridValue的刷新,列顺序混乱问题解决以及关于显示和隐藏列的办法
- DatePickerDialog 只显示年 (解决不同语言顺序不一样的问题)
- meta和title的顺序问题引起IE显示空白页
- 图片一张张按顺序加载显示问题
- 连接mysql server 5.0 数据库的乱码问题,utf8编码,中文正确显示
- echarts图标在切换标签时显示不全问题