Yeti Overlay 布局深入指南：CSS-first 覆盖层定位的原理、属性与实战
【免费下载链接】yetiA CSS-first, native, zero-build layout and styling framework for web designers.项目地址: https://gitcode.com/gh_mirrors/fo/yeti
Overlay 是 Yeti 中用于"把一件事物悬停在另一件事物之上、且不参与底层布局"的纯 CSS 布局原语：商品图上的"已售罄"印章、表单上的"保存中"提示、整页滚动中的全屏通知，都是它的典型场景。读完本文，你将掌握data-over子元素的居中定位机制、data-fixed与data-gap两个属性的完整取值与底层实现，并能判断何时该用它、何时该改用layer或对话类组件。全部内容以 src/layouts/overlay/docs.md 为骨架，并结合其源码、清单与测试逐层展开。
何时使用 Overlay（When to use it）
Overlay 的本质是"覆盖"：它把一样东西放在另一样东西上面，不参与底下那套布局。官方文档给出三类典型用法：
- 商品图片上的 "sold out"（已售罄）印章；
- 表单上方浮现的加载提示（如 "Saving…"）；
- 配合
data-fixed实现的整页通知（覆盖整个视口）。
用一句话概括它的定位：它是对话框（dialog）的"定位一半"，而"行为一半"（焦点管理、关闭方式、动画）属于组件层的职责。这一点在清单 src/layouts/overlay/manifest.json 中被明确为 "Positioning only"，并在无障碍（a11y）小节给出重要警告——任何模态场景都应使用对话框与 tooltip 组件，而不是单独使用这个原语。
与 layer 的对比：什么时候不该用它
文档特别提示了与layer的区别，值得展开理解：
layer把所有子元素按源顺序堆叠在同一个网格单元格中，盒子高度等于最高的子元素，参与布局（例如缩略图角落的角标、图片上的说明文字），详见 src/layouts/layer/docs.md；overlay只把标记了data-over的那一个子元素移出文档流并居中，对被覆盖的盒子本身不产生任何影响。
因此：如果覆盖物只是"叠上去但不该改变父盒尺寸"，用overlay；如果它需要和内容一起撑起布局，用layer。
工作原理（How it works）
Overlay 的父元素（.overlay盒子）就是"被覆盖的盒子"，它被设为position: relative，其余普通子元素照常参与文档流排列。真正特殊的是携带data-over的那个子元素：
- 它被
position: absolute移出文档流； - 其左上角被定位到盒子正中心（
top: 50%; left: 50%）； - 再通过
translate: -50% -50%按自身尺寸的一半反向平移，从而无论内容多大或多小都能精确居中； - 它的最大宽高被限制为"盒子尺寸减去两侧各一个间距"（
max-inline-size/max-block-size），超出部分通过overflow: auto在内部滚动，而不是把盒子撑破； - 若父元素带
data-fixed，该子元素改为position: fixed，此时"被覆盖的盒子"变成视口——页面滚动时它保持不动。
以上正是 src/layouts/overlay/overlay.css 的完整实现，全文仅 13 行规则：
/* Overlay: one child held over the rest. The parent is the box being covered; the child carrying><form class="overlay"> <label for="email">Email</label> <input id="email" type="email"> <p><div class="overlay"> <img src="photo.jpg" alt="A lake at dawn"> <p><div class="overlay" contenteditable="false">【免费下载链接】yetiA CSS-first, native, zero-build layout and styling framework for web designers.![]()
项目地址: https://gitcode.com/gh_mirrors/fo/yeti创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
