div的相对定位和绝对定位是什么意思,什么区别啊?

html-css011

div的相对定位和绝对定位是什么意思,什么区别啊?,第1张

相对定位和绝对定位是定位的两种表现形式,区别如下:

一、主体不同

1、相对定位:是设置为相对定位的元素框会偏移某个距离。

2、绝对定位:absolute 脱离文档流,通过 top,bottom,left,right 定位。

二、特点不同

1、相对定位:在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。

2、绝对定位:选取其最近的父级定位元素,当父级 position 为 static 时,absolute元素将以body坐标原点进行定位,可以通过z-index进行层次分级。

三、表现方式不同

1、相对定位:对一个元素进行相对定位,它将出现在它所在的位置上。可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。

2、绝对定位:文本流中的内容会顶替绝对定位元素的位置,而绝对定位元素自然的层叠于文本流之上。而在单一的绝对定位中,定位元素将会跑到网页的左上角,因为那里是被绝对定位后的坐标原点。

参考资料来源:百度百科-CSS相对定位

参考资料来源:百度百科-绝对定位

1、新建一个html文件输入两个div标签,接着使用style属性,分别给div设置为绝对定位absolute和相对定位relative,让他们其中全部向左移动20px,向上移动30px的距离:

2、然后保存文件打开浏览器看看效果,位置显示还是比较明显的:

3、最后解释下这个结果,绝对位置就是对浏览器页面左边和顶部的距离,相对位置就是距离正常的标题的距离。以上就是css中绝对定位和相对定位的使用方法: