欢迎您来到懒之才-站长的分享平台!   学会偷懒,并懒出境界是提高工作效率最有效的方法!
首页 > 教程文档 > Css&Div > 5.5 叠放文字和图象

5.5 叠放文字和图象

2018-05-05 541 收藏 0 赞一个 0 真差劲 0 去评论

下面我将要谈到我一直吹嘘的在页面上重叠要素的方法。它不是通过设定边距负值或采用更小的行高来实现,而是通过......

z-index

当你定位多个要素并将其重叠时,你可以使用z-index来设定哪一个要素应出现在最上层。

H2 { position: relative; left: 10px; top: 0px; z-index: 10 }  
H1 { position: relative; left: 33px; top: -35px; z-index: 1 }

观察这条CSS规则的执行效果(我将<H2>的文字设为绿色,以便你观察其不同之处):

20150115043023_29140.jpg

由于<H2>文字的z-index参数值更高,所以它显示在 <H1>文字的上面。(IE 4在MAC机上执行这一项时会出问题,它会将<H1>放在最上面。

该参数值使用纯整数。z-index用于绝对定位或相对定位了的要素。

你也可以给图象设定z-index。(对于Communicator,最好将 <IMG>标签包在<SPAN>或 <DIV>标签内,然后将z-index应用到<SPAN>或 <DIV>。)

返回主目录
暂无界面图片

一、推荐使用迅雷或快车等多线程下载软件下载本站资源。

二、未登录会员无法下载,登录后可获得更多便利功能,若未注册,请先注册。

三、如果服务器暂不能下载请稍后重试!总是不能下载,请点我报错 ,谢谢合作!

四、本站大部分资源是网上搜集或私下交流学习之用,任何涉及商业盈利目的均不得使用,否则产生的一切后果将由您自己承担!本站将不对任何资源负法律责任.如果您发现本站有部分资源侵害了您的权益,请速与我们联系,我们将尽快处理.

五、如有其他问题,请加网站设计交流群(点击这里查看交流群 )进行交流。

六、如需转载本站资源,请注明转载来自并附带链接

七、本站部分资源为加密压缩文件,统一解压密码为:www.aizhanzhe.com

大家评论