relative、fixed、absolute、sticky 和 static 定位元素有什么区别?
主题
CSS
在GitHub上编辑
定位元素是指其计算后的 position
属性为 relative
、absolute
、fixed
或 sticky
的元素。
static
:默认位置;元素将像通常一样流入页面。top
、right
、bottom
、left
和z-index
属性不适用。relative
:元素的位置相对于自身进行调整,不改变布局(因此为元素留出一个间隙,就像它没有被定位一样)。absolute
:元素从页面流中移除,并相对于其最近的已定位祖先(如果有)或相对于初始包含块定位。绝对定位的框可以有边距,并且它们不会与其他任何边距合并。这些元素不会影响其他元素的位置。fixed
:元素从页面流中移除,并相对于视口中的指定位置定位,并且在滚动时不会移动。sticky
:粘性定位是相对定位和固定定位的混合。该元素被视为relative
定位,直到它穿过指定的阈值,此时它被视为fixed
定位。