css positioning 第一式:⑶ position:fixed;

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

特點
  1. 容納區為 viewport 。在螢幕設備,是內容顯示區;在列印設備,是每頁的可列印區。所以,如果使用 % 單位,當然是以容納區的尺寸來計算。
  2. 其餘特點同 position:absolute
  3. 適用:所有元素。

css 體驗室

html 片段:輸入距離,試試橘區元素 (dl) 怎麼變動。虛線內緣 (article) 為模擬原有容納區。
<article>
 <dl><dt>水調歌頭 (明月幾時有) 蘇軾</dt>……
 </dl>
</article>
<article>
 <dl><dt>桃花源記 陶淵明</dt>……
 </dl>
</article>
<article>
 <dl><dt>歸去來辭 陶淵明</dt>……
 </dl>
</article>
水調歌頭 (明月幾時有) 蘇軾

明月幾時有,把酒問青天,不知天上宮闕,今夕是何年。

我欲乘風歸去,唯恐瓊樓玉宇,高處不勝寒;起舞弄清影,何似在人間。

轉朱閣,低綺戶,照無眠;不應有恨,何事長向別時圓。

人有悲歡離合,月有陰晴圓缺,此事古難全;但願人長久,千里共嬋娟。

桃花源記 陶淵明

晉太原中,武陵人,捕魚為業,緣溪行,忘路之遠近。忽逢桃花林,夾岸數百步,中無雜樹,芳草鮮美,落英繽紛,漁人甚異之﹔復前行,欲窮其林。林盡水源,便得一山。山有小口,彷彿若有光,便舍船,從口入。

初極狹,纔通人;復行數十步,豁然開朗。土地平曠,屋舍儼然。有良田美池桑竹之屬,阡陌交通,雞犬相聞。其中往來種作,男女衣著,悉如外人﹔黃發垂髫,并怡然自樂。見漁人,乃大驚,問所從來,具答之,便要還家,設洒殺雞作食,村中聞有此人,咸來問訊。自云先世避秦時亂,率妻子邑人,來此絕境,不復出焉﹔遂與外人間隔。問今是何世,乃不知有漢,無論魏、晉。此人一一為具言所聞,皆嘆惋。余人各復延至其家,皆出洒食。停數日辭去,此中人語云:「不足為外人道也。」

既出,得其船,便扶向路,處處志之。及郡下,詣太守說此。太守即遣人隨其往,尋向所志,遂迷不復得路。南陽劉子驥,高士也,聞之,欣然規往,未果,尋病終。后遂無問津者。

歸去來辭 陶淵明

歸去來兮!田園將蕪胡不歸?既自以心爲形役,奚惆悵而獨悲?悟已往之不諫,知來者之可追;實迷途其未遠,覺今是而昨非。

舟搖搖以輕殤,風飄飄而吹衣。問征夫以前路,恨晨光之熹微。乃瞻衡宇,栽欣載奔。童僕歡迎,稚子候門。三徑就荒,松菊尤存。攜幼入室,有酒盈樽。引壺觴以自酌,眇庭柯以怡顔。倚南窗以寄傲,審容膝之易安。園日涉以成趣,門雖設而常關。策扶老以流憩,時翹首而遐觀。雲無心以出岫,鳥倦飛而知還。景翳翳以將入,撫孤松而盤桓。

歸去來兮,請息交以絕遊。世與我而相遺,複駕言兮焉求?悅親戚之情話,樂琴書以消憂。農人告餘以春兮,將有事乎西疇。或命巾車,或棹孤舟。既窈窕以尋壑,亦崎嶇而經丘。木欣欣以向榮,泉涓涓而始流。羨萬物之得時,感吾生之行休。

已矣乎!寓形宇內複幾時?何不委心任去留?胡爲惶惶欲何之?富貴非吾願,帝鄉不可期。懷良辰以孤往,或執杖而耘耔。登東坳以舒嘯,臨清流而賦詩。聊乘化以歸盡,樂夫天命複奚疑?

更新日期:

google 論壇

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