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

html-css04

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中绝对定位和相对定位的使用方法:

有几个方法:

一种:

div1设置为position:relative,

div2设置为position:absolute,

此时的div2就相对于div1进行基准定位了。。。

因为绝对定位position:absolute,不在标准流中,所以内联元素不知到他的位置,会跑到他的下面去。。。这里就看你需要什么样式了,如果简单的可以用padding和margin配合完成,让内联元素出来。。但屏幕缩小放大就变形了。。

二种,

就是你改写一下你的HTML

<div

id="div1">

<div

id="div2"></div>

</div>

把div2放到div1里面,里面设置为float,再position:relative进行浮动后地位,

这种方法比第一种好,这里看你的需求了///