星期四, 8月 19, 2010

CSS之三 Positioning

這個是我比較有興趣的地方.

  • 有四種定位的方法
    1. Static Positioning
      • 預設的方法
      • 不受top, bottom, left, right影響
    2. Fixed Positioning (position: fixed;)
      • 指定東西出現在某個相對於browser window的位置
      • 即使window在捲動時, 它還留在原位, 不會跟著捲
      • example
      • 它接下來的element會當它不存在一樣, 繼續往下排
    3. Relative Positioning (position: relative;)
      • 相對於它原本應該出現的位置, 另外加上一個offset
      • ex. (left: -20px;)
      • 雖然用了relative positioning的element的顯示位置會變, 但是接下來的element, 還是會用它用本應該存在的座標, 繼續畫下去
    4. Absolute Positioning (position: absolute;)
      • 相對於他的parent的位置.
      • 如果沒有parent, 那就是<html>
      • 它接下來的element會當它不存在一樣, 繼續往下排
  • z-index, 大的排前面, 小的排後面. 可以是負的.
  • cursor, 有一大堆屬性, 可以改變cursor的外觀
  • overflow: scroll; 可以讓內容超出範圍時, 加上一個scroll bar

沒有留言: