Stack 堆叠容器
Stack 使用 Rue 当前的 stack 视觉风格，同时把 API 补成更清晰的语义层。除了基础的vertical和horizontal，现在还支持placement 组合定位，以及reverse反向层级。
何时使用
- 需要把多张卡片、图片、文件封面或通知面板做成同一视觉堆叠。
- 需要用一条属性快速切换堆叠朝向和落点，而不想反复记忆底层 class。
- 需要保持当前堆叠视觉，但希望额外控制最新项是否位于最上层。
# 基础堆叠
展示 3 div stackDemo，作为最小可用写法。
# 图片堆叠
展示 stacked images，用于相册封面或图库预览。
# 卡片堆叠
展示 stacked cards，适合做 deck、ticket 或文件层。
# 对齐与 Placement
基础的 vertical / horizontal 继续可用；placement 可以直接表达组合定位。
# 反向层级
reverse 适合把最当前本、最新消息或最新封面放在最上层。
# 阴影层次
展示 shadow 示例，适合强调卡片深度和层级关系。
# 通知堆叠
展示通知示例，并结合 reverse 展示“最新一条在最上层”的常见用法。
Notification 3
Latest release is live. Tap here to share the changelog.
Notification 2
Deploy finished successfully. Tap here to open the report.
Notification 1
You have 3 unread messages. Tap here to see.
# 场景组合
把 as、placement、reverse 和 className 组合起来，可以很快搭出带语义的堆叠封面。
API
当前页面展示的是 Stack 的完整可用 API，基础属性保持，新属性作为语义增强层补充进来。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
as | 指定根节点标签或组件，适合 section、article 等语义容器。 | any | 'div' |
className | 补充容器尺寸、圆角、边框、背景等样式。 | string | - |
horizontal | 水平方向定位；显式传入时会覆盖 placement 里的水平预设。 | 'center' | 'start' | 'end' | 'center' |
placement | 组合定位快捷写法，用一条属性同时声明 vertical 和 horizontal。 | 'center' | 'top' | 'bottom' | 'start' | 'end' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'center' |
reverse | 反转子节点渲染顺序，适合把最新项放在最上层。 | boolean | false |
vertical | 垂直方向定位；显式传入时会覆盖 placement 里的垂直预设。 | 'center' | 'top' | 'bottom' | 'center' |
placement 快捷映射
placement="top"→vertical="top"placement="bottom"→vertical="bottom"placement="start"→horizontal="start"placement="end"→horizontal="end"placement="top-start"→vertical="top" + horizontal="start"placement="bottom-end"→ vertical="bottom" + horizontal="end"FAQ
已经有 vertical 和 horizontal，为什么还要加 placement？
placement适合快速写组合定位，尤其是top-end、bottom-start这类常见场景。 如果你已经在用API，也可以使用基础的 vertical和horizontal。
placement 和 vertical / horizontal 同时传会怎样？
显式传入的vertical、horizontal优先级更高。也就是说，placement更像一个快捷预设，而不是强制覆盖层。
reverse 会改变样式还是改变 DOM 顺序？
reverse 会反转子节点渲染顺序，因此最适合“最新项在最上层”的内容流场景，比如通知、版本封面、设计稿堆叠。