css positioning 第一式:⑵ position:absolute;

讀這篇前,您應該已經了解 position

特點
  1. 容納區為以元素起,在 DOM tree 中,向上找到的最接近的上層 positioned 元素的 padding box (不是一般的 content box ,這合乎邏輯,因為如果不涵括 padding box 會變得奇怪也很難處理) 。「上層」,並不只是指向上一層 (parent) ,而是上上層、上上上層… (ancestors) 都可能是容納區。然而,可能發生的是,所有上層都沒有 positioned 的元素,這時就以文件的 initial containing block 作為容納區,不過非必要時不建議這麼用,因為會變得很難控制。所以,如果使用 % 單位,當然是以容納區的尺寸來計算。
  2. 移開後,元素 Box 完全脫離原有區域,彷彿自己獨立在另一層空間,不再與其它元素有相互連動。注意也因此,就會造成原來有連動的其它元素的編排變動。
  3. 移位後,元素 Box 尺寸依據 top, right, bottom, left 移位值來決定,也就是 Box 四邊會依四個移位值彈性變動尺寸。然而,不見得四個移位都需要指定,沒有指定移位的邊,則會依據元素的內容來緊縮,這麼處理是合乎邏輯的,因為 Box 脫離獨立了,沒辦法與容納區作連動參考了。但是,如果 widthheight 值不是 auto ,當然是依據這二個既定的尺寸值,不會因移位值而改變。
  4. 由於移位後獨立成一塊區域,當然元素就會是 block-level box ,忽略原來的形式。
  5. 適用:所有元素。

css 體驗室

html 片段:輸入距離,試試橘區元素 (dt) 怎麼變動。虛線內緣 (article) 為模擬容納區。
<article>
 <dl>
  <dt>原毀 韓愈</dt>
  <dd><p>古之君子,其責己也重以周,其待人也輕以約……
  </dd>
 </dl>
</article>

使用 % 單位,標線如出現問題,可改用最新版 firefoxie

原毀 韓愈

古之君子,其責己也重以周,其待人也輕以約。重以周,故不怠;輕以約,故人樂為善。聞古之人有舜者,其為人也,仁義人也。求其所以為舜者,責於己曰:「彼人也,予人也,彼能是,而我乃不能是。」早夜以思,去其不如舜者,就其如舜者。聞古之人有周公者,其為人也,多才與藝人也。求其所以為周公者,責 於己曰:「彼人也,予人也,彼能是,而我乃不能是。」早夜以思,去其不如周公者,就其如周公者。舜,大聖人也,後世無及焉;周公,大聖人也,後世無及焉。是人也,乃曰:「不如舜,不如周公,吾之病也。」是不亦責於身者重以周乎!其於人也,曰:「彼人也,能有是,是足為良人矣;能善是,是足為藝人矣。」取其一,不責其二;即其新,不究其舊,恐恐然惟懼其人之不得為善之利。一善易修也,一藝易能也,其於人也,乃曰:「能有是,是亦足矣。」曰:「能善是,是亦足矣。」不亦待於人者輕以約乎!

今之君子則不然,其責人也詳,其待已也廉。詳,故人難於為善;廉,故自取也少。己未有善,曰:「我善是,是亦足矣。」己未有能,曰:「我能是,是亦足矣。」外以欺於人,內以欺於心,未少有得而止矣。不亦待其身者已廉乎其於人也,曰:「彼雖能是,其人不足稱也;彼雖善是,其用不足稱也。」舉其一,木計 其十;究其舊,不圖其新,恐恐然惟懼其人之有聞也。是不亦責於人者已詳乎!夫是之謂不以眾人待其身,而以聖人望於人,吾未見其尊己也。雖然,為是者,有本有原,怠與忌之謂也。怠者不能修,而忌者畏人修。吾常試之矣,常試語於眾曰:「某良士。某良土。」其應者必其人之與也;不然,則其所疏遠不與同其利者也;不然,則其畏也。不若是,強者必怒於言,懦者必怒於色矣。又嚐語於眾曰:「某非良士。某非良土。」其不應者,必其人之與也;不然,則其所疏遠不與同其利者也;不然。則其畏也。不若是,強者必說於言,懦者必說於色矣。是故事修而謗興,德高而毀來。

嗚呼!士之處此世,而望名譽之光、道德之行,難已!將有作於上者,得吾說而存之,其國家可幾而理歟!

更新日期:

google 論壇

css animation art (groups.google.com/group/css-animation-art/)