Re: position:relative 与 transform

2011/8/12 Kang-Hao (Kenny) Lu <kennyluck@w3.org>

> **
> img { position: absolute;
>         position-root: parent;
>         top: ...
>         right: ... }
>
> 達到，可以完全省掉沒必要的 li { position: relative; } 。�@裡的 position-root 用來指定
> top/right/bottom/left 的參考座標元素，有
> parent/previous/container（�@差不多是原來的行為）/viewport（差不多就是 'position:
> fixed'），甚至還有之前提過一次[2]的 element() 可以直接指定元素！
>
>
我觉得winter会对这个proposal很满意，position-root消除了position:relative只为设置container的必要性，而position:relative的其他用途可以用transform来解决。这样winter让position:relative退休的想法就可以实现啦！

我也认为Atkins这个设计比CSS原先的设计要好。原本的设计中，太多indirect的因素，无论对于实作还是理解都是非常头痛。

比如当看到一个position:absolute的时候，到底TMD这个元素是如何layout的？你得在脑子里还原其他所有父元素的position的computed
value！唔！

实作也是一样，当一个元素的position发生变化时，得遍历其所有absolute的子孙元素并relayout。

而在这个设计里，只要看写在一起的position-root就可以了。


> 另外，還可以用以下代碼達到微博的「半固定」通知[3]的效果：
>
> nav { position: relative;
>         position-root-top: bottommost(self top, viewport top); }
>
> 完全無 JS！求 Hax 用 JS 的兼容實作！
>
> [3] http://hi.baidu.com/aztack/blog/item/a9f2a7c207c7e30e0ff47730.html
>

CSS属性没法实现，因为像position-root-top这样的属性直接被引擎抛弃了，cssom里拿不到！（神奇的IE系列是唯一的例外）。

当然可以做JS接口，但是这样丧失了CSS的其他power如selector的自动匹配和cascade。

不过就这个case来说，通常很少会override像定义position这样的规则，所以可以考虑哦。待我有空尝试一下。