html中的相对和绝对定位,实例讲解CSS中相对定位和绝对定位的用法和区别

一、相对定位

相对定位是指，该元素相对自己原来位置，偏移一定距离，元素可以通过顶部top，底部bottom，左侧left和右侧right属性来设置定位。它相对的是它自己。

举例：大div里面包含5个小P，给P不同的类名，分别设置绝对定位和相对定位，看看他们有什么变化

没有设置定位的代码如下：

*{padding: 0;margin: 0;}

.box{width: 400px;height: 500px;border: 1px solid black;margin: 50px auto;}

.p1{width: 100px;height: 100px;background: red;}

.p2{width: 100px;height: 100px;background: orange;}

.p3{width: 100px;height: 100px;background: yellow;}

.p4{width: 100px;height: 100px;background: green;}

.p5{width: 100px;height: 100px;background: purple;}

效果如图所示：

现在给第一个p标签设置相对定位，让他相对于自己原来的位置上偏移50px，左边偏移50px，具体代码如下：

.p1{width: 100px;height: 100px;background: red;position: relative;left: 50px;top: 50px;}

效果图：

对比前后效果图，有没有发现第一个p元素，它相对自己原来的位置发生了偏移，而且偏移以后，它依然占据原来的位置，后面的元素不会填补，如果有重叠，会重叠在它文档流元素之上，相对定位不会把其他元素挤掉。

二、绝对定位

绝对定位是指，该元素相对它的父元素偏移一定距离，元素可以通过顶部top，底部bottom，左侧left和右侧right属性来设置定位。

注：相对的是父元素，而且这个父元素必须设置了position属性。如果父元素没有position属性，则从最近的父元素开始找，直到找到body为止。

举例：给第三个p元素设置绝对定位，让其上偏移200px，左偏移200px，具体代码如下：

.p3{width: 100px;height: 100px;background: yellow;position: absolute;left: 200px;top: 200px;}

效果图：

对比图1和图3可以发现，设置了绝对定位的元素，会脱离文档流，后面的元素会填补上来。因为第三个p标签的父元素为div，没有给div设置position属性，所以它最终找到body，相对于body发生了偏移。

三、相对定位和绝对定位的区别

相对定位：相对自己原来的位置发生偏移，不会脱离文档流，不会删除它原来在文档流中占据的位置，且后面是元素不会填补空位

绝对定位：相对它的父元素发生偏移(而且这个父元素必须设置了position属性，如果父元素没有position属性，则从最近的父元素开始找，直到找到body为止)，会脱离文档流，后面的元素会填补它原来的位置。

以上给大家介绍了什么是相对定位，什么是绝对定位，以及相对定位和绝对定位的区别，初学者一定要自己动手尝试，希望这篇文章对你有所帮助！

html中的相对和绝对定位,实例讲解CSS中相对定位和绝对定位的用法和区别相关推荐

python中numpy数组的合并_基于Python中numpy数组的合并实例讲解
基于Python中numpy数组的合并实例讲解 Python中numpy数组的合并有很多方法,如 - np.append() - np.concatenate() - np.stack() - np. ...
linux 命令 cd -p,Linux_实例讲解Linux中cd命令切换目录的使用技巧，cd命令大家再熟悉不过了,bash sh - phpStudy...
实例讲解Linux中cd命令切换目录的使用技巧 cd命令大家再熟悉不过了,bash shell经常会被用到的切换目录命令. 接下来我们直接通过万能的man来了解cd命令. 直接 man cd 是不行的 ...
python中能够处理的最大整数是_实例讲解Python中整数的最大值输出
在Python中可以存储很大的值,如下面的Python示例程序: x = 10000000000000000000000000000000000000000000; x = x + 1 print ( ...
python爬虫股票指数变化_python爬虫中抓取指数的实例讲解
有一些数据我们是没法直观的查看的,需要通过抓取去获得.听到指数这个词,有的小伙伴们觉得很复杂,似乎只在股票的时候才听说的,比如一些数据的涨跌分析都是比较棘手的问题.不过指数对于我们的数据分析还是很有帮 ...
python求三个整数最大值_实例讲解Python中整数的最大值输出
实例讲解Python中整数的最大值输出在Python中可以存储很大的值,如下面的Python示例程序: x = 1000000000000000000000000000000000000000000 ...
linux ksh 用户名,实例讲解Linux中ksh的用法
实例讲解Linux中ksh的用法发布时间:2008-02-18 20:46:01来源:红联作者:Modegle 熟悉Linux的朋友肯定都知道bash,它是Linux默认的命令行解释程序,熟悉Sol ...
详解CSS的相对定位和绝对定位
CSS的相对定位和绝对定位一.Static 静态定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,这个时候你给这个元素设置的left,r ...
min-width、max-width属性中min-content、max-content的含义，css中minmax()用法、1fr单位的含义----使页面具有相应性的属性以及属性值
min-width.max-width属性中min-content.max-content的含义,css中minmax()用法.1fr单位的含义 min-width 表示容器的最小宽度 max-wid ...
python中mainloop添加背景_Python实例讲解 - tkinter canvas (设置背景图片及文字)
Python实例讲解 -- tkinter canvas (设置背景图片及文字) 先来一个绘图: from Tkinter import * master = Tk() w = Canvas(mast ...

html中的相对和绝对定位,实例讲解CSS中相对定位和绝对定位的用法和区别

html中的相对和绝对定位,实例讲解CSS中相对定位和绝对定位的用法和区别相关推荐

最新文章

热门文章