HTML的relative与absolute使用及区别详解

　 短视频，自媒体，达人种草一站处事

这篇文章首要先容了HTML的relative与absolute行使及区别详解，文中通过示例代码先容的很是具体，对各人的进修可能事变具有必然的参考进修代价，必要的伴侣们下面跟着小编来一路进修进修吧

HTML的relative与absolute区别：说真话html这门说话算的上是这个天下上最简朴的一门说话了，标签说话嘛，就是标签多了点英文单词超多，不外都是有纪律的好比文本类居中text-align:center;加粗text-weight:bold;.可是照旧有一些较量难领略把握标签和属性，就好比属性position,它是定位的一种方法代码如下：

#div1{
position: relative;
width: 200px;
height: 200px;
background-color: blueviolet;
margin-left: 100px;
}

先来说一下postion常用的5大属性值：

--sticky：基于用户的转动位置来定位。也就是以sticky标签界说的标签会跟着页面上下移动，可是其内容却不会高出屏幕好比在网站侧边那些移动导航栏。

--static：HTML元素的默认值，即没有定位，元素呈此刻正常的流中。静态定位的元素不会受到 top, bottom, left, right影响。也就是和没写position一样的结果。

--fixed：元素的位置相对付赏识器窗口是牢靠位置。纵然窗口是转动的它也不会移动，相等一个壁纸标签一样一动不动像镶嵌在屏幕里一样，在许多网站尤其是购物网站内里常常能看到，你看到页面侧边那悄悄躺在那的导航栏就是用fixed实现的

--relative与absolute：相对定位元素的定位是相对其正常位置。每个标签的样式配置从来都是针对本身的，可是会对别的标签发生相对影响，html很重要的一点就是嵌套相关即标签里有标签，起首在平级我们看下结果两个是兄弟相关

以上这种环境将div1的position配置为relative相对位置，可以看出小方块会紧接着大方块也就是小方块是相对付大方块来的也就是relative：相对定位元素的定位不应承元素的重叠，俗话就是通过relative嗣魅这个位置我已经占了你只有站我下个位置了，当我们把大方块的改成绝对位置absolute

#div1{
position: absolute;
width: 200px;
height: 200px;
background-color: blueviolet;
margin-left: 100px;
}

结果如下：

小方块会跳上去，也就是嗣魅这个位置两个div都能占，不是大方块独有的absolute定位是定位绝对的相对付父标签而言，本例的父标签就是

扩展：

<div>
<div></div>
</div>

当小方块嵌套在大标签内里这时你的div1的position的relative与absolute结果一样没有改变之前的结果只表此刻兄弟标签之间

这时辰假如你再配置div2的样式margin-left就是相对付div2来说了，举个例子当你大方框间隔左边100px当你小方框样式margin-left：100px;这时现实环境是小方框间隔左边有200px

#div1{
position: relative;
width: 200px;
height: 200px;
background-color: blueviolet;
margin-left: 100px;
}
#div2{
margin-left: 100px;
position: absolute;
width: 50px;
height: 50px;
background-color: red;
}

总结：相对定位元素常常被用来作为绝对定位元素的容器块，当标签有嵌套时，子标签的位置样式配置是相对付父标签的。宁外想要相识快标签就必需相识html的盒子模子

到此这篇关于HTML的relative与absolute行使及区别详解的文章就先容到这了,更多相干HTML的relative与absolute内容请搜刮剧本之家早年的文章或继承赏识下面的相干文章，但愿各人往后多多支持剧本之家！

（编辑：湖南网）

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