Quasar CSS 定位工具类完全指南：fixed / absolute / 对齐与垂直居中-育师

Quasar CSS 定位工具类完全指南：fixed / absolute / 对齐与垂直居中

【免费下载链接】quasarQuasar Framework - Build high-performance VueJS user interfaces in record time项目地址: https://gitcode.com/gh_mirrors/qu/quasar

Quasar 框架内置了一套开箱即用的 CSS 定位工具类，涵盖fixed、absolute、fullscreen三类定位体系以及浮动的对齐与垂直对齐类，让开发者无需手写一行自定义 CSS 即可完成元素定位、全屏覆盖、容器内居中、图标间距等高频布局需求。本文以 Quasar 官方文档 positioning.md 为骨架，结合框架源码 ui/src/css/core/positioning.sass 中每一行 Sass 实现，逐类讲解每个工具类的真实 CSS 效果、适用场景与注意事项，帮助你在 Quasar 应用中精准、高效地完成 DOM 元素定位。

定位工具类总览

Quasar 为开发者提供的定位类全部定义在框架核心样式文件 ui/src/css/core/positioning.sass 中，并通过 ui/src/css/index.sass 的@import './core/positioning.sass'随 Quasar 样式一起注入应用，因此无需任何额外配置即可直接使用。

下表是官方文档列出的全部定位类名与用途：

Class Name	Description
`fullscreen`	Fix position covering all window real-estate
`fixed`	Set`position`to`fixed`without specifying`top`,`left`,`right`or`bottom`properties
`fixed-center`	Set position to`fixed`but in the middle of window.
`absolute`	Set`position`to`absolute`without specifying`top`,`left`,`right`or`bottom`properties
`absolute-center`	Set position to`absolute`but in the middle of the container (container needs relative position).
`fixed-topabsolute-top`	Fixed or absolute position to top of screen
`fixed-rightabsolute-right`	Fixed or absolute position to the right edge of screen
`fixed-bottomabsolute-bottom`	Fixed or absolute position to bottom of screen
`fixed-leftabsolute-left`	Fixed or absolute position to the left edge of screen
`fixed-top-leftabsolute-top-left`	Fixed or absolute position to top left of screen
`fixed-top-rightabsolute-top-right`	Fixed or absolute position to top right of screen
`fixed-bottom-leftabsolute-bottom-left`	Fixed or absolute position to bottom left of screen
`fixed-bottom-rightabsolute-bottom-right`	Fixed or absolute position to bottom right of screen
`fixed-fullabsolute-full`	Fixed or absolute position to all screen edges
`relative-position`	Set position to`relative`

观察源码可以发现这些类并非孤立的，而是分层组合而成。首先是最基础的一层——所有fixed-*类（以及fixed、fixed-full、fullscreen、fixed-center）统一共享position: fixed，所有absolute-*类（以及absolute、absolute-full、absolute-center）统一共享position: absolute：

.fixed, .fixed-full, .fullscreen, .fixed-center, .fixed-bottom, .fixed-left, .fixed-right, .fixed-top, .fixed-top-left, .fixed-top-right, .fixed-bottom-left, .fixed-bottom-right position: fixed .absolute, .absolute-full, .absolute-center, .absolute-bottom, .absolute-left, .absolute-right, .absolute-top, .absolute-top-left, .absolute-top-right, .absolute-bottom-left, .absolute-bottom-right position: absolute

也就是说，fixed-*与absolute-*家族的区别只在于定位上下文：fixed相对于浏览器视口（viewport）定位，不随页面滚动而移动；absolute相对于最近的已定位（positioned）祖先元素定位。两者在方向属性上的写法完全对称，下文将分别展开。

fixed 系列：相对视口的固定定位

fixed系列工具类用于把元素固定在浏览器视口的某个方位上，即使页面滚动元素也始终停留在原地。方向类在源码中的具体实现如下：

.fixed-top, .absolute-top top: 0 left: 0 right: 0 .fixed-right, .absolute-right top: 0 right: 0 bottom: 0 .fixed-bottom, .absolute-bottom right: 0 bottom: 0 left: 0 .fixed-left, .absolute-left top: 0 bottom: 0 left: 0 .fixed-top-left, .absolute-top-left top: 0 left: 0 .fixed-top-right, .absolute-top-right top: 0 right: 0 .fixed-bottom-left, .absolute-bottom-left bottom: 0 left: 0 .fixed-bottom-right, .absolute-bottom-right bottom: 0 right: 0

注意几个容易被忽略的细节：

单边类（fixed-top/fixed-bottom/fixed-left/fixed-right）会同时拉伸两个方向。例如fixed-top设置了top: 0; left: 0; right: 0，意味着元素在水平方向上会被拉满整行宽度；fixed-left则会在垂直方向拉满。如果你想要"紧贴顶部但只占内容宽度"的效果，应改用fixed-top-left或fixed-top-right这类角类。
角类（如fixed-top-left）只固定两个相邻边，元素保持自身尺寸，因此是实现"贴角徽标、悬浮按钮、返回顶部"等场景的首选。
底部的fixed-bottom默认没有任何安全区（safe area）处理，在 iOS 刘海屏等设备上若需避让底部 Home 指示条，通常需要与q-safe-area-padding等安全区工具配合使用（可参考 body-classes.md）。

单独的 fixed 类

fixed类本身只设置position: fixed，不指定任何top/left/right/bottom。从源码可以看到它与fixed-full、fullscreen等共享同一个选择器组，仅声明了定位方式。此时元素会停留在其文档流位置对应的视口坐标上，适合"把某个原本在正常流中的元素提升为固定层"但又不希望改变其位置的场景——不过更常见的做法是直接用带方向的子类，以便精确控制。

absolute 系列：相对容器的绝对定位

absolute系列与fixed系列共享同一套方向规则（见上文源码中的成对选择器），唯一的区别在于定位参考系：

fixed-*→ 相对浏览器视口；
absolute-*→ 相对最近的已定位祖先元素（即position不为static的祖先）。

因此，当使用absolute-*系列时，必须确保其父容器带有relative-position类（或任何非static的定位），否则元素会一路向上找到body甚至视口作为定位基准，产生意料之外的位置。官方文档对absolute-center的说明也特别强调了这一点："container needs relative position"。

父容器写法：

<div class="relative-position" style="width: 300px; height: 200px;"> <div class="absolute-bottom-left">贴住容器左下角</div> </div>

从源码看，relative-position的实现只有一行：

.relative-position position: relative

它是absolute-*系列最常用也最标准的定位上下文。官方文档的示例代码中大量使用了这一组合，例如 Intersection/Basic.vue 就在外层容器上使用class="relative-position"来承载内部组件。

absolute-full 与 fixed-full：铺满容器 / 视口

absolute-full与fixed-full分别把元素拉伸到容器或视口的四个边：

.absolute-full, .fullscreen, .fixed-full top: 0 right: 0 bottom: 0 left: 0

absolute-full常用于实现"遮罩层、加载占位、悬停操作层"等覆盖整个容器的效果，例如 MorphUtils/FabCard.vue 中在卡片上叠加覆盖层，再配合absolute-center把内容居中展示。

fullscreen：真正铺满整个窗口

fullscreen类除了与fixed-full一样铺满四个边之外，还在源码中额外定义了专属于它的规则：

.fullscreen z-index: $z-fullscreen border-radius: 0 !important max-width: 100vw max-height: 100vh body.q-ios-padding .fullscreen, body.q-safe-area-padding .fullscreen padding-top: var(--q-safe-area-inset-top) !important padding-bottom: var(--q-safe-area-inset-bottom) !important

这些额外规则值得逐一说明：

z-index 提升：z-index: $z-fullscreen，其中$z-fullscreen定义在 ui/src/css/variables.sass 中，值为6000（$z-fullscreen: 6000 !default）。这是一个很高的层级，确保全屏元素能盖住绝大多数 UI，包括菜单、弹层等；同层级还有一个配套的.z-fullscreen工具类定义在 ui/src/css/core/elevation.sass 中，用于为任意元素手动指定相同层级。
强制取消圆角：border-radius: 0 !important避免全屏元素（例如从圆角弹窗"放大"为全屏）残留圆角。
尺寸约束：max-width: 100vw; max-height: 100vh防止元素超出视口（尤其是内容比视口更大时）。
安全区适配：当body带有q-ios-padding或q-safe-area-padding类时，fullscreen会自动为上下边缘补上安全区 inset 内边距（通过 CSS 变量--q-safe-area-inset-top/--q-safe-area-inset-bottom），从而规避 iPhone 刘海与底部 Home 条遮挡内容的问题。

在 Quasar 的组件体系中，fullscreen类常被用于自定义全屏遮罩；而组件级别的全屏能力可参考 app-fullscreen.md 中介绍的AppFullscreen插件。

水平与垂直居中：fixed-center / absolute-center

居中一直是布局中的高频需求，Quasar 提供了两个专门的工具类：

.fixed-center, .absolute-center top: 50% left: 50% transform: translate(-50%, -50%)

实现思路是经典的"双 50% + 反向位移"：先让元素左上角定位到容器/视口的 50% 处，再用transform: translate(-50%, -50%)把元素向左上回移自身宽高的一半，从而实现真正意义上的几何居中（而非简单的文字居中）。这与 flexbox 的justify-content: center; align-items: center效果等价，但适用于任何定位上下文。

fixed-center：相对整个视口居中，常用于全屏加载指示器、全局消息浮层；
absolute-center：相对最近的已定位容器居中，前提是父容器需要relative-position类，常用于卡片内的居中内容、按钮内的图标等。

例如官方示例 Morph/BasicGroup.vue 就使用class="absolute-center"把元素放到演示容器正中央，配合absolute-top-left、absolute-bottom-right等角类形成完整布局。

由于依赖transform，使用这两个类时请注意：元素上的其他 transform 动画可能会与居中位移相互影响，需要将两者合并到同一个transform声明中。

对齐类：float 与图标间距

除了定位，Quasar 还提供了一组轻量的对齐类：

Class Name	Description
`float-left`	Float to the left
`float-right`	Float to the right
`on-left`	Sets a small margin to the right; commonly used for icon elements with other siblings
`on-right`	Sets a small margin to the left; commonly used for icon elements with other siblings

源码实现：

.float-left float: left .float-right float: right .on-left margin-right: 12px .on-right margin-left: 12px

其中on-left/on-right是 Quasar 在图标与文本混排场景下的贴心设计：on-left给元素右侧加上 12px 外边距，on-right给元素左侧加上 12px 外边距。这样在按钮、列表项中放置图标时，只需给图标加上on-left即可自动与相邻文字拉开间距，无需手写 margin。QBtn 等组件的icon属性内部正是借助这套间距语义来保证图标与标签的呼吸感。

官方文档同时给出了一条重要的实践建议（TIP）：

Instead of usingfloat-leftorfloat-rightwe recommend that you read on the Quasar Grid System.

即：除非确有需要，否则不建议使用float-left/float-right，而是优先采用 Quasar 网格系统（Grid System）中的 flex 布局类（如row、justify-end等）来实现横向排列，因为浮动布局会脱离文档流、容易引发父容器高度塌陷等经典问题，而 flex 布局更可控、更易响应式适配。关于 flex 工具类的完整用法可参阅 flex.sass 对应的官方文档。

垂直对齐类

当需要控制行内元素（inline / inline-block）或表格单元格内容的垂直对齐方式时，可以使用以下三个类：

Class Name	Description
`vertical-top`	Set CSS vertical alignment to`top`
`vertical-middle`	Set CSS vertical alignment to`middle`
`vertical-bottom`	Set CSS vertical alignment to`bottom`

源码实现中，这三个类通过 Sass 的父选择器嵌套批量生成，并且都带上了!important以提升优先级：

.vertical- &top vertical-align: top !important &middle vertical-align: middle !important &bottom vertical-align: bottom !important

vertical-align只作用于行内级元素与表格单元格，因此vertical-top等类适合用来对齐"同一行内高度不一的图标与文字"，或控制QAvatar、QBadge等内联组件在文字行中的位置。注意它不适用于块级元素——块级元素间的垂直对齐应使用 flex 或 grid 方案。

实战组合示例

下面用一个综合示例演示定位类的典型组合。假设我们要实现"卡片右下角悬浮一个操作按钮 + 卡片内居中展示加载状态"：

<div class="relative-position" style="width: 100%; height: 240px;"> <!-- 卡片内容 --> <!-- 容器内居中：需要父容器 relative-position --> <div class="absolute-center"> 加载中… </div> <!-- 容器内右下角悬浮按钮 --> <div class="absolute-bottom-right q-ma-md"> <q-btn round color="primary" icon="add" /> </div> <!-- 全屏遮罩：铺满整个视口 --> <div class="fullscreen bg-dark text-white"> 全屏覆盖层 </div> </div>

这与官方示例 MorphUtils/FabCard.vue 中"absolute-bottom-right悬浮按钮 +absolute-center居中内容"的布局模式如出一辙，是 Quasar 生态中常见的悬浮操作（FAB）实现方式。

使用建议与相关资源

定位参考系是首要决策点：需要随页面滚动、相对容器定位用absolute-*（记得给父容器加relative-position）；需要恒久悬浮在视口上用fixed-*；需要覆盖整个窗口且拥有高层级用fullscreen。
间距与定位配合使用：absolute-bottom-right等角类常与 spacing.md 中的间距类（如q-ma-md、q-pa-lg）组合，避免贴边元素与边缘零距离。
优先 flex 而非 float：官方建议用 Grid System 替代float-left/float-right；float类保留给确实需要文档流环绕排版的场景。
垂直对齐有边界：vertical-*只对行内元素与表格单元格生效，块级场景请使用 flex 的items-*系列。
源码即文档：以上全部实现的精确 CSS 都可直接查阅 ui/src/css/core/positioning.sass，层级变量$z-fullscreen定义于 ui/src/css/variables.sass，样式整体通过 ui/src/css/index.sass 注入框架。