加入收藏 | 设为首页 | 会员中心 | 我要投稿 焦作站长网 (https://www.0391zz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 站长资讯 > 动态 > 正文

HTML5 层的叠加的完成

发布时间:2021-10-12 12:42:19 所属栏目:动态 来源:互联网
导读:这篇文章主要介绍了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;

(编辑:焦作站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    热点阅读