层叠样式表/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 时匹配滚轮状态