css - css位置之间有什么区别？

Question

我是 CSS 新手。我试图理解，但我做不到。请解释一下位置(绝对、固定、相对、静态)。用在什么地方？

Answer 1

在这里你可以了解css poisitions


之间的基本区别

位置:静态；

静态定位元素不受 top、bottom、left 和 right 属性的影响。 具有 position: static; 的元素没有以任何特殊方式定位；它始终根据页面的正常流程定位。

position:relative；

具有 position: relative; 的元素相对于其正常位置定位。 设置相对定位元素的 top、right、bottom 和 left 属性将导致它被调整远离其正常位置。其他内容将不会调整以适应元素留下的任何间隙。

位置:固定；

具有 position: fixed; 的元素相对于视口(viewport)定位，这意味着即使页面滚动，它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位元素。

position:absolute；

具有 position: absolute; 的元素相对于最近定位的祖先定位(而不是相对于视口(viewport)定位，如 fixed)。

但是；如果绝对定位元素没有定位的祖先，它使用文档主体，并随着页面滚动移动。