定位与浮动 / Position & Float

定位工具控制元素采用 static、relative、fixed、absolute 或 sticky 布局，并可将定位元素贴到四个物理边缘。浮动工具提供 left/right 以及随 dir 自动映射的 start/end，并支持响应式和打印媒体变体。

基础用法

absolute · top-0 · right-0

bottom-0 · left-0

html

<section class="position-relative">
  <aside class="position-absolute top-0 right-0">右上角</aside>
</section>

top-0/right-0/bottom-0/left-0 只设置对应边缘为 0，需要配合非 static 定位使用。

LTR · float-start

Start

RTL · float-start

Start

float-right

Right

html

<section dir="rtl">
  <div class="float-start">RTL 中浮向右侧</div>
</section>

响应式中缀统一见分辨率。例如 float-left float-md-right 会在小屏向左浮动，从 md 开始改为向右。

float-print-start/end/left/right/none 只在浏览器打印媒体中覆盖当前浮动，即按 Ctrl + P、进入打印预览或导出 PDF 时生效。“打印媒体”的完整说明见显示与打印。

正在加载本章类名…

最后更新于2026/9/15 08:27