- 桃源行 王維
-
漁舟逐水愛山春，兩岸桃花夾去津。坐看紅樹不知遠，行盡青溪不見人。
山口潛行始隈隩，山開曠望旋平陸。遙看一處攢雲樹，近入千家散花竹。樵客初傳漢姓名，居人未改秦衣服。
居人共住武陵源，還從物外起田園。月明松下房櫳靜，日出雲天雞犬喧。
驚聞俗客爭來集，競引還家問都邑。平明閭巷掃花開，薄暮漁樵乘水入。
初因避地去人間，及至成仙遂不還。峽裡誰知有人事，世中遙望空雲山。
不疑靈境難聞見，塵心未盡思鄉縣。出洞無論隔山水，辭家終擬長游衍。自謂經過舊不迷，安知峰壑今來變。
當時只記入山深，青溪幾曲到雲林？春來遍是桃花水，不辨仙源何處尋。
css positioning 第一式：⑴ position:relative;
讀這篇前，您應該已經了解 position 。
- 特點
- 容納區為元素原先 Normal Flow Box 的容納區，元素彷若隨著整塊容納區移動，而看到的像是元素由原來的位置移開。所以，如果使用
%單位，當然是以容納區的尺寸來計算。 - 移開後，此元素以外的元素維持原有編排。
- 移位後，元素 Box 尺寸保持與原來 Normal Flow 時相同固定不變。因此，如同時指定水平二方向 (
right,left) ，或垂直二方向 (top,bottom) 為正值移位，其一方向會被忽略 (視文字書寫方向，如由左向右，則left優先，right被忽略) ；這個邏輯很容易被理解，因為 Box 尺寸固定不能變，如果都有效不就把 Box 擠爆了。 - 移位後，元素 Box 會保留原來的繪製等級，如 block box, inline box …。基本上沒什麼大改變，多了可以移位。
- 適用：所有元素。除
display為table結構相關的元素。
- 容納區為元素原先 Normal Flow Box 的容納區，元素彷若隨著整塊容納區移動，而看到的像是元素由原來的位置移開。所以，如果使用
z-index
- 指定 positioned 元素重疊的前後順序，以整數值表示，愈大愈前面；不同元素間只比較大小，不一定要連號，也可以相同重複；相同時，視元素在文件內的排列順序，愈後上場的元素會愈前面。雖接受負值，不過非必要時儘量少用，避免製造複雜問題。
- positioned 元素的子元素當然還是跟隨這個元素的平面與其它元素的堆疊順序，縱使子元素是 positioned 元素，並且可能有較大的
z-index值。 - 內定值 (未指定時) 為
z-index:auto。auto的狀態會視為最小正值或0，只比非 positioned 元素前面，就算z-index:1也會比z-index:auto前面。 - 適用： positioned 元素及 flex items 。
css 體驗室
輸入距離，試試淡藍區元素 (以 article 表示) 怎麼移動。虛線內緣為模擬容納區。改變 margin 可能造成 Box 較劇烈變動。
- 定風波 蘇東坡
-
莫聽穿林打葉聲，何妨吟嘯且徐行。
竹杖芒鞋輕勝馬，誰怕？一簑煙雨任平生。
料峭春風吹酒醒，微冷，山頭斜照卻相迎。
回首向來蕭瑟處，歸去，也無風雨也無晴。
z-index, position
- html 片段：試試四塊區域 (
dl) 相互的變動。虛線內緣 (article) 為模擬容納區。 <article> <dl> <dt>回鄉偶書 賀知章</dt><dd>……</dd> </dl><dl> <dt>芙蓉樓送辛漸 王昌齡</dt><dd>……</dd> </dl><dl> <dt>送孟浩然之廣陵 李白</dt><dd>……</dd> </dl><dl> <dt>滁州西澗 韋應物</dt><dd>……</dd> </dl> </article>
- 回鄉偶書 賀知章
-
少小離家老大回，
鄉音無改鬢毛衰。
兒童相見不相識，
笑問客從何處來。
- 芙蓉樓送辛漸 王昌齡
-
寒雨連江夜入吳，
平明送客楚山孤。
洛陽親友如相問，
一片冰心在玉壺。
- 送孟浩然之廣陵 李白
-
故人西辭黃鶴樓，
煙花三月下揚州。
孤帆遠影碧空盡，
惟見長江天際流。
- 滁州西澗 韋應物
-
獨憐幽草澗邊生，
上有黃鸝深樹鳴。
春潮帶雨晚來急，
野渡無人舟自橫。
css 動腦玩
書籤效果
- 桃源行 王維
-
漁舟逐水愛山春，兩岸桃花夾去津。坐看紅樹不知遠，行盡青溪不見人。
山口潛行始隈隩，山開曠望旋平陸。遙看一處攢雲樹，近入千家散花竹。樵客初傳漢姓名，居人未改秦衣服。
居人共住武陵源，還從物外起田園。月明松下房櫳靜，日出雲天雞犬喧。
驚聞俗客爭來集，競引還家問都邑。平明閭巷掃花開，薄暮漁樵乘水入。
初因避地去人間，及至成仙遂不還。峽裡誰知有人事，世中遙望空雲山。
不疑靈境難聞見，塵心未盡思鄉縣。出洞無論隔山水，辭家終擬長游衍。自謂經過舊不迷，安知峰壑今來變。
當時只記入山深，青溪幾曲到雲林？春來遍是桃花水，不辨仙源何處尋。
例子最後加了一個小驚嘆…反折效果，這是運用了 position:absolute 。此外，也可加一點陰影 (box-shadow) 強化立體感。
- css 片段如下，先睹為快…
dt::after /*標題反折三角*/ { content:''; position:absolute; width:0; height:0; border-color:transparent; border-width:16px; border-top-style:solid; border-left-style:solid; border-top-color:hsl(240,16%,50%); border-top-width:8px; top:100%; left:0; } dt /*標題陰影*/ { box-shadow:0 2px 1px -1px rgba(0,0,0,0.2); margin-right:-16px; }
如果只需要單純的位移，也可以運用 transform ，如 transform:translateX(-16px); 。
隱藏與顯現
- html 片段：每個字以
b, span二層元素圍繞。 <p><span><b>不</b></span><span><b>憤</b></span><span><b>不</b></span><span><b>啟</b></span></p>
不憤不啟
由於 position:relative; 元素移動不會造成版面編排變動，這裡用了這個方式，可以省去計算每個元素位置的麻煩，而且元素的尺寸自動形成，不需要另外再指定寬高。
隱藏移出 <span> 區域的內容，運用了 overflow:hidden ，但這個屬性的元素必須是 block-level box 才會有效，在這裡我們指定 display:inline-block 就恰如其分了。文字從外面回到原來的位置，只要是多了一點時間差，就可以製造更活潑的視覺，簡直就跟繪圖軟體裡的遮色片沒兩樣哩。把字換成圖片？…您肯定想到更多了吧！
更新日期：