在HTML / CSS中,绝对定位和相对定位之间有什么区别?


回答 1:

相对的:

位置为:相对的元素; 相对于其正常位置定位。

设置相对放置的元素的top,right,bottom和left属性将导致其偏离其正常位置进行调整。 其他内容将不进行调整以适合元素留下的任何间隙。

了解有关CSS布局的更多信息-position属性

绝对:

位置为:绝对的元素; 相对于最近定位的祖先定位(而不是相对于视口定位,如固定)。

然而; 如果绝对定位的元素没有祖先,它将使用文档正文,并随页面滚动一起移动。

注意:“定位”元素是其位置除静态外其他任何元素的元素。

了解有关CSS布局的更多信息-position属性

资料来源:w3schools


回答 2:

它细分为是否耗尽了提供的位置。 布局HTML时,它会形成某种堆栈,因此,一页又一页地往下走。 如果一件东西被移走,一切都会向上移动以填充其空间。

通过相对定位,可以为其保留空间。 因此,即使您使用CSS的顶部/左侧移动元素,该元素原本位于其中的空间也保持不变。

但是,当您指定绝对位置时,它将从堆栈中移出,并且其下方的所有内容都将移入它的位置。 它位于自己的单独层上,不再影响页面。 基于具有相对定位的最接近的父对象进行定位。

还有另一种类型,并且是固定的。 这就像绝对定位,只是它使用浏览器窗口作为参考,因此甚至不与滚动连接,即使滚动页面也将保留在原位。


回答 3:

它细分为是否耗尽了提供的位置。 布局HTML时,它会形成某种堆栈,因此,一页又一页地往下走。 如果一件东西被移走,一切都会向上移动以填充其空间。

通过相对定位,可以为其保留空间。 因此,即使您使用CSS的顶部/左侧移动元素,该元素原本位于其中的空间也保持不变。

但是,当您指定绝对位置时,它将从堆栈中移出,并且其下方的所有内容都将移入它的位置。 它位于自己的单独层上,不再影响页面。 基于具有相对定位的最接近的父对象进行定位。

还有另一种类型,并且是固定的。 这就像绝对定位,只是它使用浏览器窗口作为参考,因此甚至不与滚动连接,即使滚动页面也将保留在原位。