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