绝对定位和相对定位的区别是什么

绝对定位和相对定位的区别是什么,第1张

绝对定位(absolute):设置了绝对定位的标签会脱离文档流,以浏览器客户端的左顶点进行位置偏移
相对定位(relative):设置了相对定位的标签会保留标签原来的位置空间,以标签自身的左顶点进行位置偏移
以上就是两者的区别,这个知识点是我在传智播客学习PHP的时候学到的,你可以看一下他们的基础视频,这些知识点都有的。

哥们,这个问题是不能这么问的,语言都是根据需求设计出来的。都有用处。你自己用得多了就明白了。
一般绝对定位经常是需要有相对定位的辅助的,绝对定位默认是根据<body>来计算位置的,而往往网页写的时候经常并不能明确的知道你要把一个块定位在那里,这个块距离<body>的top和left是多少。<div style="position:relative"></div>,这个是相对定位,设置了之后和没有设置都没什么两样,<div>的位置还是没有变化的,但是如果在里面放了<div style="position:absolute">绝对定位的块,这个块就可以以父元素所在的位置左上角作为基准来进行定位,而不再是以<body>的左上角作为依据了。以父元素的左上角来做基准是不是方便多了。
相对定位本身用的比较少,一般都和绝对定位配合用,具体可以去了解下

需要准备的材料分别有:电脑、浏览器、html编辑器。

1、首先,打开html编辑器,新建html文件,例如:indexhtml。

2、在indexhtml中的<style>标签中,输入css代码:img {position: absolute;top: 100px; left: 200px;}。

3、浏览器运行indexhtml页面,此时通过css实现了的绝对定位,距离左侧100px,顶部200px,不随网页大小而变化。

绝对定位就是把元素的左上角固定到浏览器窗口的某个指定的、唯一的坐标点上,比如说 left:100px; top:50px 就是说元素的左边距离浏览器窗口的左边100像素、元素的上边距离浏览器窗口的上边50像素。
而相对定位就是相对于元素本来的位置再进行平移后获得新的位置,也就是说这个新位置是要根据原来的位置来定的,比如 left:10px; top:-20px 就是把元素往右移动10像素,往上移动20像素。
打个比方,在地球上我们用经纬度来确定一个点的位置就是绝对定位,而类似“东南方向15公里”这样的就是相对定位了。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/10253792.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-06
下一篇 2023-05-06

发表评论

登录后才能评论

评论列表(0条)

保存