当前位置:首页 > 技术开发

HTML5 层的叠加的实现

老肖1年前 (2024-11-04)技术开发1246

这篇文章主要介绍了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>


扫描二维码推送至手机访问。

版权声明:本文由老肖的互联网分享发布,如需转载请注明出处。

本文链接:https://www.laoxiaoup.com/post/9.html

分享给朋友:

“HTML5 层的叠加的实现” 的相关文章

什么是ROI?

什么是ROI?

ROI是什么?书面解释是投资回报率,通俗来讲就是你投入100块钱能收回多少钱,收回150,ROI就是150/100=1.5,这就是ROI,ROI也可以简称为投产 。最开始接触ROI是做手游运营的时候,那时候广告投放是以百万级起步的,我们算ROI并不是算单日的投产,而是拉长来看,一个月、两个…

评论列表

香蕉影视

很经典,收藏了!https://www.laoxiaoup.com/go?url=https%3A%2F%2Fwww.xjtv1.com

2K影院

听楼主一席话,省我十本书!https://www.laoxiaoup.com/go?url=https%3A%2F%2Fwww.2kdy.com

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。