Re: position:relative 与 transform

再頂去年十月的老帖。原文：http://lists.w3.org/Archives/Public/public-
html-ig-zh /2010Nov/0000

(10/11/01 21:04), 劭非程 wrote:
> 最近又没人讲话了，我又跳出来讲两句
>  
> position:relative是怎么用的大家都知道，两个作用：第一个是top和left可以
> 做为偏移量，在不改变元素在流 中的位置的情况下使元素显示位置偏移，另一
> 个是relative元素做为absolute子元素的基准。
>  
> 现在我们有了transform，所以靠top和left来偏移已经没有了必要。
>  
> 而原来的relative元素的做为absolute子元素的基准，本来就稍显古怪，我想是
> 不是应该单独拿出一个属性来标示更合 适？

這是個很有趣的問題，我本來在想說把增加一個 'position: container' 以減少
使用者的困擾的這個可能性，後來在認真的讀了這個 Tab Atkins（Google 在 CSS
工作組的唯一代表）在去年十月中旬的時候弄的一個極為強大的提案[1]之後，完
全放棄了這個想法。在這個提案裡，常見的

<li>...<img /></li>
<li>...<img /></li>
...

的 img 絕對定位可以只用

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() 可以直接指定元素！

[1] http://www.xanthir.com/blog/b48H0
[2] http://lists.w3.org/Archives/Public/public-html-ig-zh/2011Apr/0021

另外，還可以用以下代碼達到微博的「半固定」通知[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

== 參見 ==
* 提案本身[1]
* 提案在提出來的時候在 www-style 上的熱烈討論[4]
* 最近一次在 www-style 上的相關討論[5]

[4] http://lists.w3.org/Archives/Public/www-style/2010Oct/thread#msg334
[5] http://lists.w3.org/Archives/Public/www-style/2011May/thread#msg463


在 2010年11月2日 上午12:22，John Hax <johnhax@gmail.com
<mailto:johnhax@gmail.com>>写 道：
>
>     transform不就是不影响子元素的absolute的吗？ 
>

我糊塗了，看不懂這句話。absolute？relative？

>     话说absolute/relative以最近一个positioned祖先元素（position不为
>     static的， 包括absolute/relative/fixed等）为基准，其实是挺有用的，
>     否则很难做一个容器内的定位，都要用脚本算 了。
>

這裡若我沒弄錯的話，我想 Hax 的意思應該是說還是會有這種可能性 — 你想用在
相對定位（top/left 之類的不為 0）裡面的子元素絕對定位 — 那這樣沒有
'position: relative' 的確辦不到。


(10/11/02 10:21), 劭非程 wrote:
> hax又忘了回复全部了
>  
> 我不是要砍掉这个功能，而是觉得现在的表达方式比较古怪，我的意思是
> positioned是否应该做为一个独立的属性出现 而把偏移交给transform去做，这
> 样position:relative;就可以做为不推荐的值使用让它慢慢退休了。

在沒有 top/left 的情形下的確應該退休，不過偏移全交給 transform 去做似乎
無法解決 Hax 的那種用法（雖然感覺是很稀少）。另外若是要用 transform 解決
「半固定」，似乎會變成 'transform:translateY(max(0, calc( ?? - ??
)));'。一來誇號太多，二來我實在不知道那兩個 ?? 要填什麼，CSS 取值模組[6]
找不到可以用的東西。

[6] http://dev.w3.org/csswg/css3-values/

> 把absolute基准这个事情跟position绑起来实在太奇怪了，大家有谁知道这 个
> 背后有什么道理或者故事吗？

感覺是歷史共業，要查查看才知道。


最後，我仍舊開了一個這個提案的翻譯頁面[7]，翻譯這個提案有什麼好處呢？就
算這最後成不了標準似乎也可以拿來當作非常特殊的 CSS 筆試考題 —「若 CSS 有
以下功能、、、」。啊，太像學究了。

[7] http://www.w3.org/html/ig/zh/wiki/CSS_Positioned_Layout


此致

呂 康豪（Kenny）, 中文興趣小組W3C連絡人
推特: http://twitter.com/kanghaolu
Google+: https://plus.google.com/112088462407783855918/posts
新浪微博: http://t.sina.com.cn/1950042164