`relative`, `absolute`, `fixed` 和 `sticky` 定位的元素之间有什么区别?
Topics
CSS
在GitHub上编辑
定位元素是一个元素,其计算的 position
属性是 relative
, absolute
, fixed
或 sticky
。
static
: 默认位置; 元素将会像通常那样流入页面。top
,right
,bottom
,left
和z-index
属性不生效。relative
:元素的位置相对于它自己进行调整,而不改变布局(从而在元素没有被定位的情况下为它留下一个缺口)。absolute
:该元素从页面流中移除,并相对于其最近的祖先(如果有的话)或相对于初始包含块的指定位置定位。 绝对位置的方框可以有边距,而且它们不会与任何其他外边距一起折叠。 这些元素不影响其他元素的位置。fixed
:该元素被从页面流中移除,并被定位在相对于视口的指定位置,滚动时不会移动。sticky
:粘性定位是相对定位和固定定位的一种混合。 该元素被视为relative
定位,直到它越过一个指定的阈值,超过这一阈值它将被视为fixed
定位。