W3C home > Mailing lists > Public > public-html-ig-zh@w3.org > August 2011

Re: position:relative 与 transform

From: John Hax <johnhax@gmail.com>
Date: Fri, 12 Aug 2011 14:55:30 +0800
Message-ID: <CAEeYXHWennTb85dV0mZUR+qhZY9ODhKj-ggU=Lgn4aGipLqYnQ@mail.gmail.com>
To: "Kang-Hao (Kenny) Lu" <kennyluck@w3.org>
Cc: (wrong string) 樂會ML <public-html-ig-zh@w3.org>
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这样的规则,所以可以考虑哦。待我有空尝试一下。
Received on Friday, 12 August 2011 06:55:58 UTC

This archive was generated by hypermail 2.3.1 : Tuesday, 6 January 2015 20:43:49 UTC