層疊樣式表/CSS 選單

用途

  position: relative; text-align:right; /* for the container, */
  position: absolute; left: 0; /* for the left aligned element, */
  display: inline; /* or */
  display: inline-block /* for the right element. */

用於模擬浮動併為頁首建立書籤，而不會遇到浮動的副作用

使用巢狀在相對定位包裝器中的絕對定位 div，透過以下步驟建立等高列

- 使用浮動或內聯塊建立列

- 在所有列周圍建立一個包裝器 div，並將其設定為相對定位

- 將一個絕對定位的 div 作為最後一個元素放置在包裝器 div 中

- 將絕對定位的 div 設定為 { bottom:0; height: 100%; z-index: -1; }

- 將高度設定為一個足夠大的固定數字，以填充 IE6 中的列

- 將絕對定位的 div 的寬度設定為第一列的寬度

- 設定絕對定位的 div 的左偏移量，使其與第一列重疊

- 設定絕對定位的 div 的所需邊框和背景顏色

- 如果需要，對其餘列重複此步驟

- 設定 { position:relative; z-index:2; }，新增垂直填充（或用填充替換邊距）並在列上方或下方重置任何容器的背景，以隱藏 IE6 中的溢位

- 設定 { top:1px; margin-top: -1px; } 以在 IE6 中垂直對齊絕對定位的 div

- 設定 clip:rect(0 ## 9999px 0); 其中 ## 是列的寬度，以截斷 IE6 中的水平溢位

- 如果 z-index:2 在 IE6 中失敗，請使其高於包裝器 div 的 z-index（如果它們在同一個父級中）

- 如果 z-index:2 在 IE6 中仍然失敗，請使其高於包裝器 div 父級的 z-index

使用巢狀的跨度，透過以下步驟建立不規則形狀的錨點，而無需使用影像地圖： - 使用與上述相同的設定，將跨度巢狀在錨點中

- 將錨點和跨度設定為絕對定位

- 將 ul 設定為相對定位

- 為錨點和跨度設定單個背景影像

- 重新定位錨點和跨度，以使錨點的邊界框不重疊

- 更改錨點和跨度的背景位置，使其在 :hover 時匹配滾輪狀態