【CSS筆記】Position屬性

學習CSS Position各項屬性的筆記以及可以簡單操作的練習網頁。

top, bottom, left and right

已設定position屬性的物件，才可以使用left: 100px;, top: 200px;等語法來設定搭配的數值

position: static;

預設的position屬性為static，不做特別的排列，僅將物件以程式碼中的順序列出

Try it yourself－Position Static

position: relative;

讓物件移動到相對於預設位置的地方，此處top, bottom, left and right設定的是相對於預設位置的margin量

Try it yourself - Position Relative

position: absolute;

讓物件為在相對於最近新增且已定位（Positioned）之物件的位置，已定位物件是指已
設定除static外之position屬性的物件

Try it yourself - Position Absolute

position: fixed;

fix to the relative position to the browser window，物件會待在相對於瀏覽器畫面中的某固定位置如右下角（bottom:0; right:0;），此時網頁不管捲動到哪，該物件都會保持在右下角的位置

Try it yourself - Position Fixed

控制物件上/下層，使用z-index

兩個已定位（Positioned）物件，可以使用z-index來設定誰在上層誰在下層，z-index數值越大的越上層，背景圖片可以使用負值確保位在最底層

Try it yourself - z-index

延伸閱讀：

http://www.w3schools.com/css/css_positioning.asp