ApricityUI Layout Test
Generic Layout Properties
用于单独观察常见 layout 属性，不和 text / animation / recipe 之类测试混在一起。
Coverage
display
position + inset
width / height
margin / padding
overflow
flex-direction
justify-content
align-items
gap / row-gap / column-gap
grid-template-columns
grid-column / grid-row
justify-self / align-self
z-index + translateZ
Notes
每个区块都尽量只验证一组属性，方便肉眼排查。
颜色、字体和动画不是这页重点，只做最小辅助。
最后一个案例专门留给层叠与覆盖关系。
1. Display / Normal Flow
预期：block 纵向堆叠；inline 在同一行流动；inline-block 同行但可设宽高。
block A
block B
inline-1 inline-2 longer inline-3 ib-1 ib-2
2. Position / Insets / Absolute
预期：absolute 元素脱离文档流，锚定到相对定位容器右上角。
flow box
flow box 2
ABS
3. Margin / Padding / Box Occupancy
预期：margin 拉开兄弟间距，padding 扩大内容与边框之间的空白。
padding 6
margin-left 16
margin-top 6
4. Overflow / Scroll Container
预期：右侧列表高度受限，超出部分进入滚动容器。
overflow hidden
This is a very long line for overflow clipping check.
item 1
item 2
item 3
item 4
item 5
item 6
5. Flex Row / Column / Alignment
预期：上方 row 使用 space-between；下方 column 靠右对齐，并体现 gap。
R1
R2
R3
C1
C2
C3
6. Grid / Placement / Self Alignment
预期：三列网格，G2 跨两列，G4 固定第二行，G5 单独自对齐。
G1
G2 span2
G3
G4 fixed
G5 self
7. Layering / z-index / translateZ
预期：浅色底板在最底层，蓝卡压住底板，金卡再压住蓝卡。
base
z-index 1
translateZ 8