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很重要的一点就是嵌套关系即标签里有标签,首先在平级我们看下效果两个是兄弟关系

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

以上这种情况将div1的position设置为relative相对位置,可以看出小方块会紧接着大方块也就是小方块是相对于大方块来的也就是relative:相对定位元素的定位不允许元素的重叠,俗话就是通过relative说这个位置我已经占了你只有站我下个位置了,当我们把大方块的改成绝对位置absolute

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

效果如下:

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

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

扩展:

<div id=”div1″>
<div id=”div2″></div>
</div>

当小方块嵌套在大标签里面这时你的div1的position的relative与absolute效果一样没有改变之前的效果只体现在兄弟标签之间

HTML的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的relative与absolute使用及区别详解

总结:相对定位元素经常被用来作为绝对定位元素的容器块,当标签有嵌套时,子标签的位置样式设置是相对于父标签的。宁外想要了解快标签就必须了解html的盒子模型

到此这篇关于HTML的relative与absolute使用及区别详解的文章就介绍到这了,更多相关HTML的relative与absolute内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

免责申明:
1. 本站所有下载资源均不包含技术支持和安装服务!需要讨论请进群!
2. 分享目的仅供大家学习和交流,请不要用于商业用途!
3. 如果你也有好源码或者教程,可以到审核区发布,分享有云朵奖励和额外收入!
4. 如有链接无法下载、失效或广告,请联系管理员处理!
5. 本站无法保证资源或破解时效性,如某些授权码过期等问题,恕不在修复范围内。
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!故不接受任何形式的退款,如确认资源确有问题的,会补给相应云朵以供再次购买。
7. 53Kr源码暂未发现后门代码,但无法保证100%安全,推荐检测方法:上传到 https://www.virustotal.com/在线查看是否有恶意代码以及其他有后门嫌疑的代码。
8. 在本站下载的源码我还是不建议正式使用,有特别喜欢的可以去程序官方购买。
53kr资源站仅提供学习的平台,所有资料均来自于网络,版权归原创者所有!本站不提供任何保证,并不承担任何法律责任,如果对您的版权或者利益造成损害,请提供相应的资质证明,我们将于3个工作日内予以删除。
53kr资源分享 » HTML的relative与absolute使用及区别详解

发表评论

提供最优质的资源集合

立即查看 了解详情