CSS 中有以下四种定位方式:
static
(静态定位):元素的正常定位模式,按照文档流中出现的顺序进行布局,不受定位属性(如 top、left 等)的影响。
relative
(相对定位):元素仍然保持其原来在文档流中的位置,但可以通过 top
、bottom
、left
、right
属性相对于自身在文档流中的位置调整。
absolute
(绝对定位):将元素从文档流中完全移除,并相对于最近的非 static
定位的父元素或根元素进行定位。如果没有符合条件的父元素,则以 html
元素为准。
fixed
(固定定位):将元素移除文档流,并相对于浏览器窗口进行定位,在页面滚动时会固定在当前位置,适用于实现悬浮导航等效果。
需要注意的是,相对定位和绝对定位的元素都可以使用 z-index
属性来控制堆叠顺序,其中 z-index
值越大的元素越靠近顶部。