HTML5如何实现图层的叠加
短信预约 -IT技能 免费直播动态提醒
这篇文章主要介绍了HTML5如何实现图层的叠加,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
position语法:
position : static absolute relative
position参数:
static : 无特殊定位,对象遵循HTML定位规则
absolute : 将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位。而其层叠通过css z-index属性定义。此时对象不具有边距,但仍有补白和边框
relative : 对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置
position说明:
设置对象的定位方式,可以让布局层容易位置绝对定位,控制盒子对象更加准确。
<html> <head> <title>层的定位</title> </head> <style> div {height:300; width:300; } #d1 {position:absolute; background-color:green; left:2em; top:2em; } #d2 {position:absolute; background-color:blue; left:4em; top:4em; } #d3 {position:absolute; background-color:red; left:6em; top:6em; } </style> <body> <div id="d1"> <div id="d2"> <div id="d3"> </body> </html>
感谢你能够认真阅读完这篇文章,希望小编分享的“HTML5如何实现图层的叠加”这篇文章对大家有帮助,同时也希望大家多多支持编程网,关注编程网行业资讯频道,更多相关知识等着你来学习!
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341