怎么在html5层实现叠加效果
本文小编为大家详细介绍“怎么在html5层实现叠加效果”,内容详细,步骤清晰,细节处理妥当,希望这篇“怎么在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><divid="d1"> <divid="d2"> <divid="d3"> </body></html>
读到这里,这篇“怎么在html5层实现叠加效果”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注亿速云行业资讯频道。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。