本文关键详细介绍了HTML的relative与absolute应用及差别详细说明,原文中根据实例编码详细介绍的十分详尽,对大伙儿的学习培训或是工作中具备一定的参照学习培训使用价值,必须的小伙伴们下边伴随着我来一起学习了解一下吧
HTML的relative与absolute差别:说真话html这门語言算的上是这一世界最简易的一门語言了,标识語言嘛,便是标识多了点英语词很多,但是全是有规律性的例如文字类垂直居中text-align:center;字体加粗text-weight:bold;.可是還是有一些较为难了解把握标识和特性,就例如特性position,它是精准定位的一种方法编码以下:
#div1{
position: relative;
width: 201080x;
height: 201080x;
background-color: blueviolet;
margin-left: 100px;
}
先而言一下postion常见的5大特性值:
--sticky:根据客户的翻转部位来精准定位。也就是以sticky标识界定的标识会伴随着网页页面左右挪动,可是其內容却不容易超出显示屏例如在网址侧面这些挪动导航条。
--static:HTML原素的初始值,即沒有精准定位,原素出現在一切正常的流中。静态数据精准定位的原素不容易遭受 top, bottom, left, right危害。也就是和未写position一样的实际效果。
--fixed:原素的部位相对性于电脑浏览器对话框是固定不动部位。即便 对话框是翻转的它也不会挪动,非常一个墙纸标识一样一动不动像嵌入在显示屏里一样,在许多 网址尤其是网购网站里边常常能见到,你见到网页页面侧面那静静地躺在哪的导航条便是用fixed完成的
--relative与absolute:相对定位原素的精准定位是相对性其一切正常部位。每一个标识的款式设定几乎全是对于自身的,可是会对其他标识造成相对性危害,html很重要的一点便是嵌入关联即标识里有标识,最先在同级大家看下实际效果2个是兄弟关系
之上这类状况将div1的position设定为relative相对位置,能够看得出小三角会接着大格子也就是小三角是相对性于大格子来的也就是relative:相对定位原素的精准定位不允许原素的重合,老话便是根据relative说这一部位我已经占了你仅有站我下一个部位了,在我们把大格子的改为肯定部位absolute
#div1{
position: absolute;
width: 201080x;
height: 201080x;
background-color: blueviolet;
margin-left: 100px;
}
实际效果以下:
小三角会跳上,换句话说这一部位2个div都能占,并不是大格子独享的absolute精准定位是精准定位肯定的相对性于父标识来讲,本例的父标识便是
拓展: