1 of 14

HTML5、CSS3 網頁切版

排版技巧之定位模式

​

彭彭的課程教學

2 of 14

核心的 CSS 屬性

3 of 14

position:absolute|fixed|relative

4 of 14

left、right�top、bottom

5 of 14

結構說明

6 of 14

50px

position:absolute;�top:50px;�left:100px;

100px

position:absolute

7 of 14

20px

position:relative;�top:-20px;�left:60px;

60px

position:relative

8 of 14

座標的參考對象

9 of 14

絕對定位 absolute��以最接近的 absolute 或 relative 或 fixed 容器為基準�否則以 body 標籤為基準

10 of 14

position:relative

position:absolute;�left:20px;top:30px

容器、項目

11 of 14

position:absolute

position:absolute;�left:20px;top:30px

容器、項目

12 of 14

使用任何其他排版

position:absolute;�left:80px;top:60px

容器、項目

13 of 14

相對定位 relative��以正常版面中的位置為基準

14 of 14

固定定位 fixed��以螢幕的網頁畫面為基準