CSS重叠元素、层交互的定位与实现代码

　　CSS重叠元素、层交互的定位与实现代码，三者交叉重叠，绝对定位的实现，我们通过这个例子，可以看到代码并不复杂，但是可以感受到css的灵活性，与早期的表格式网页相比，css更能设计出新颖的布局，如果您还没熟悉css，请参照烈火网提供的css手册。

　　演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br /> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /> <html xmlns="http://www.w3.org/1999/xhtml"><br /> <head><br /> <title>css重叠</title><br /> <style><br /> .sun{<br /> position:absolute;<br /> width:150px;<br /> height:100px;<br /> background:#000000;<br /> z-index:10px;<br /> }<br /> .index1{<br /> top:50px;<br /> left:50px;<br /> background:#333333;<br /> z-index:2;<br /> }<br /> .index2{<br /> position:relative;<br /> top:100px;<br /> left:100px;<br /> background:#666666;<br /> z-index:-1;<br /> }<br /> .index3{<br /> top:150px;<br /> left:150px;<br /> background:#999999;<br /> z-index:1;<br /> }<br /> div{<br /> position:absolute;<br /> width:200px;<br /> height:150px;<br /> }<br /> </style><br /> </head><br /> <body><br /> <div class="index1"></div><br /> <div class="index2"></div><br /> <div class="index3"><br /> <div class="sun"></div></div><br /> </body><br /> </html><br /> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

热点

CSS重叠元素、层交互的定位与实现代码

由 dawei

您错过了

云直播技术：创新驱动，媒体行业的新飞跃

云直播技术：实现全球观众实时共享精彩瞬间

科技带领，云直播开启数字化生活新篇章

云直播技术，增强了线上活动的沉浸感与互动性

CSS重叠元素、层交互的定位与实现代码

由 dawei

相关文章

网站优化的整个完整步骤

基于PHP实现发微博动态代码实例

PHP文件操作简单介绍及函数汇总

您错过了

云直播技术：创新驱动，媒体行业的新飞跃

云直播技术：实现全球观众实时共享精彩瞬间

科技带领，云直播开启数字化生活新篇章

云直播技术，增强了线上活动的沉浸感与互动性