Maggie Appleton 写设计、人类学和智能体界面时，习惯先画清楚隐喻，再谈工具。把「Positioning Elements & Scrollytelling in CSS」整理成可阅读的中文笔记：问题在哪、界面默认会把人带去哪、落地时该改什么。原站导航、评论回响和广告已去掉。

Position has six possible values

Notes (mostly to myself) on how the CSS position property works because I constantly forget. Specifically in relation to building scrollytelling pieces.

Having control over where elements are positioned on a webpage is essential for building scrollytelling stories. We have to understand exactly how elements will behave within the layout, especially in relation to the scrollbar and viewport.

1. Static

The position property determines where an element appears on the page. Sounds simple. But it also includes how an element relates to its parent element, the browser window, how it behaves on scroll, and whether placement properties like top , right , bottom , left and z-index will have any effect.

static is the default value for elements. They stick to the normal page flow and placement properties (top, left, z-index, etc.) don’t have any effect.

2. Relative

This would be the equivalent code, but we never need to explicitly declare it since all elements are static by default.

. tealBox { position : static ; } 2. Relative relative keeps the element in the normal document flow, but allows us to use placement properties. This means we can move the element up, down, left or right, relative to where it would have been in the normal document flow.

3. Absolute

For example, if we nudge this box -20px up, and -20px to the left, it moves to here:

/> In our CSS we would just need to declare a relative property on our box, then add top and left properties:

4. Fixed

. tealBox { position : relative ; top : -10 px ; left : -10 px ; } 3. Absolute absolute removes the element from the normal document flow. It places itself on an absolute position relative to the whole document.

The position of the parent has no influence on where the child shows up. Placement values like top and left are calculated relative to the document.

5. Sticky

Declaring position: absolute , left: 20px and bottom: 20px on this .tealBox element would position it 20 pixels from the left and 20px from the bottom of the document.

. tealBox { position : absolute ; left : 20 px ; bottom : 20 px ; } Relative Parents and Absolute children If you declare position: relative on the parent element, and position: absolute on the child, it now positions itself relative to the parent.

落地时建议先做的 5 件事

1. 先写清这个工具在强化思考还是在替人思考。
2. 默认交互不要只会谄媚：该追问、该给反例、该要求证据。
3. 智能体界面要露出推理步骤，而不是只给一个光滑答案。
4. 知识发布用可生长的笔记，而不是一次性营销长文。
5. 改产品前先画隐喻：用户以为自己在做什么，系统实际在做什么。

和智能体产品怎么接

龙虾PRO做 OpenClaw 落地时，最该从这类笔记里拿走的是「别把聊天框当唯一界面」。数字员工要能追问、能验证、能把过程摊开，而不是只负责说好话。

本文侧重全链路风控方法论。落地时请用自身业务单据做回放验证，不要把示例阈值直接当生产策略。 相关：风控体检 · 方案资源