HTML5如何实现图层的叠加

tangjin

作者

这篇文章主要介绍了HTML5如何实现图层的叠加，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

position语法：position : static absolute relative

HTML5如何实现图层的叠加

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如何实现图层的叠加”这篇文章对大家有帮助，同时也希望大家多多支持恰卡编程网，关注恰卡编程网行业资讯频道，更多相关知识等着你来学习!

阅读全文

发布于 2021-03-21 22:37:04

html5