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

position:absolute的含义

在CSS中,position:absolute是一种定位方式。
当元素的位置属性设置为绝对时,元素的位置将相对于其最近的定位祖先进行定位。
如果没有定位的祖先元素,则它相对于初始包含块定位。
这意味着您可以通过指定left、right、top和Bottom属性来精确控制元素的位置。

1.绝对定位的基本概念:在网页布局中,元素通常按照它们在HTML中出现的顺序流畅地排列。
但是当我们将元素的position属性设置为absolute时,该元素的布局就不再受流体布局的影响。
即元素的位置不再受上下文元素影响,而是根据指定的坐标定位。

2.相对于定位的祖先元素:如果某个元素设置为position:absolute,则其位置将相对于最接近的定位祖先元素确定。
如果没有找到这样的祖先元素,则它相对于初始包含块定位,该初始包含块通常是HTML元素的根元素。
这意味着我们可以通过控制这些祖先元素的位置和大小来间接控制绝对定位元素的位置。

3.使用场景:绝对定位在网页布局中非常有用。
它可用于创建远离文档流的元素,并且不占用空间或影响其他元素的布局。
因此,它通常用于创建模式、下拉菜单、工具提示和其他需要精确位置控制的元素。
同时结合相对定位,可以实现复杂的布局效果。
例如,我们可以使用相对定位来锚定容器,然后在容器内使用绝对定位来排列子元素。

总的来说,position:absolute是CSS中一个非常有用的属性,它可以让开发者精确控制元素的位置,从而实现各种复杂的布局效果。

HTML中DIV的相对定位与绝对定位

绝对定位:

如果将DIV块的位置定义为绝对定位,它将失去其在文档流中的位置,后续文档流也会跟随。
填满它并占据它的位置。
如果上、下、左、右的绝对偏移量均为0,则它将浮动在原始位置。
否则,它将相对于浏览器的顶部、底部、左侧和右侧进行偏移。

相对:

当设置了相对偏移量时,这个DIV原来占据的位置(文档流)将不会被下一个DIV块占据。
它是空的。
偏移时,底部或右侧的内容将被隐藏。
这与滚动条出现的绝对定位不同。
但是,左侧或右侧的内容,无论是相对的还是位置的,都会超出当前浏览器的视线,因此超出的部分会被隐藏。