由于平时不太用到，所以过去写css的时候对于position属性的absolute、 relative值理解比较模糊，对于z-index的层叠更是摸不着头脑，除了理解的因素外，各个浏览器的不同解析结果也是一个大问题。今天仔细阅读了一下css文档，总算是对盒模型的浮动、定位有了比较深刻的理解。我们在实践中很有可能遇到这样的问题：1、做一个横向导航，然后鼠标经过之后出现下拉菜单，那么这个下拉菜单的位置控制就是一个关键；2、我们想在一个正常的页面布局中放入几个浮在页面上的气泡提示，这时既不想让气泡提示破坏正常的文档布局，又不想气泡提示的定位在不同的浏览器中到处乱飘。3、当我们在一句正常的文本中插入一个小图标的话，一般会使用<img />标签...

position()     返回值:Object{top,left} 概述 获取匹配元素相对父元素的偏移。 返回的对象包含两个整形属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。 示例 描述: 获取第一段的偏移 HTML 代码: <p>Hello</p><p>2nd Paragraph</p> jQuery 代码: var p = $("p:first"); var position = p.position(); $("p:last").html( "left: " + position.left + ", top: " + position.top ); 结果: <p>Hello</p><p>left: 15, top: 15</p> ...

withinIncludingScrolloffsets      [不推荐] withinIncludingScrolloffsets(element, x, y) -> Boolean 判断点 x, y（以页面左上角为坐标原点）是否在 element 的边界范围内。 当 element 是一个可滚动容器的子节点时，请使用该方法代替 Position.within。 在使用时，应按照 Position.prepare --> withinIncludingScrolloffsets --> Position.overlap 的顺序调用这些方法。 已废弃！ 该方法用于处理 Position.within 的一种特殊情形：element 是一个滚动容器的子节点。（例如，在 Script.aculo.us 中，当一个可拖拽的容器是可滚动容器时，就会用到它。） 从执行效率方面考虑，一般...

within     [不推荐] within(element, x, y) -> Boolean 判断点 x, y（以页面左上角为坐标原点）是否在 element 的边界范围内。 在使用 Position.overlap 方法前必须立即调用该方法。 已废弃！ 该方法使用 Position.cumulativeOffset 来计算 element 距页面左上角的距离，然后根据 element 的高度和宽度标识出元素四个角的偏移值，最后再与 x 和 y 参数指定的坐标相比较，如果 (x, y) 落入 element 的边界内，则返回 true。 样例 var element = $('some_positioned_element'); Position.cumulativeOffset(element); // -> [100, 100]（元素距离页面的左方和顶部都是 100px） Element.getD...

relativize     [不推荐] relativize(element) 转换元素的定位方式为相对定位，并且不改变元素在页面中的位置。 译注：该方法使用代码 element.style.position = 'relative' 改变定位方式。在改变定位方式后， 元素左上角的坐标仍会保持原来的位置，如果元素未设置初始的 width 和 height 属性，则调用该方法后， 元素的宽度和高度会改变为系统预设值。 已被 Element#relativize 方法取代。

realOffset     [不推荐] realOffset(element) -> [Number, Number] 在内含滚动条的容器中计算元素的累积滚动偏移值。 已被 Element#cumulativeScrollOffset 方法取代。 累加元素及它的所有先代节点的 scrollLeft 和 scrollTop。 该方法常用于在多个滚动容器（例如在一个可滚动的容器中包含一个可滚动的文档）中计算元素的滚动偏移值。 注意：所有返回值都仅有数字，单位为像素。

positionedOffset     [不推荐] positionedOffset(element) -> [Number, Number] 以 element 的容器块（Containing Block）节点（译注：距离元素最近的 CSS position 属性为 relative 或 absolute 的先代节点）为坐标原点，返回 element 的坐标偏移值（元素的容器块节点可通过 Position.offsetParent(element) 方法获取）。 已被 Element#positionedOffset 方法取代。 这个方法其实是累加元素及其所有父元素的 offsetLeft 和 offsetTop，直到其中一个元素的 CSS position 属性不等于 static（译注：static 是 position 的默认值）为止。 注意：所有返回值都仅有数字，单位为像素。 ...

page      [不推荐] page(element) -> [Number, Number] 返回 element 相对于浏览器可视区域左上角的坐标值。 （译注：坐标原点以浏览器当前可见的部分为基准，意即当滚动条滚动后， 坐标原点也随之改变，坐标原点在当前窗口中永远可见。） 已被 Element#viewportOffset 取代。 注意：所有返回值都仅有数字，单位为像素。

overlap     [不推荐] overlap(mode, element) -> Number 返回一个界于 0 和 1 之间的数值，用于表示先前使用 Position.within 方法指定的点基于 element 左上角的坐标值与 element 宽高的比例。mode 可以设置为 vertical 或 horizontal。 已废弃！ 假设有一个块级别的 element（即元素具有宽和高）以及一个以页面左上角为原点的坐标为 x, y 的点，调用 Position.within 将会指出这个点是否在 element 所占据的区域内。 现在假设有一个与 element 具有相同尺寸的元素，它的右下角（译注：原文为左上角）顶点坐标为 x, y。Position.overlap 指出这两个元素在水平和垂直方向上的重叠部分相对于 element...

offsetParent     [不推荐] offsetParent(element) -> HTMLElement 返回 element 的容器块（Containing Block）（译注：距离元素最近的 CSS position 属性为 relative 或 absolute 的先代节点）节点， 如果不存在这样一个节点，则返回 body 元素。 已被 Element#getOffsetParent 方法取代。 返回的元素是 element 的 CSS containing block。

cumulativeOffset     [不推荐] cumulativeOffset(element) -> [Number, Number] 返回 element 相对于页面左上角的坐标。 已被 Element#cumulativeOffset 方法取代。 累加元素及它的所有先代节点的 offsetLeft 和 offsetTop。 注意：所有返回值都仅有数字，单位为像素。

clone     [不推荐] clone(source, target[, options]) -> [Number, Number] 从 source 中复制参数 options 指定的位置和/或尺寸的相关信息到 target。 已被 Element#clonePosition 方法取代。 注意：该方法根据 CSS containing block 的规则判定元素的位置信息是否相同，调用该方法后，target 和 source 的位置信息按照上述规则严格匹配。 选项 名称 默认值 描述 setLeft true 克隆 source 的 CSS 属性 left 到 target。 ...

absolutize     [不推荐] absolutize(element) 转换元素的定位方式为绝对定位，并且不改变元素在页面中的位置。 译注：该方法使用代码 element.style.position = 'absolute' 改变定位方式。在改变定位方式后， 元素左上角的坐标仍会保持原来的位置，如果元素未设置初始的 width 和 height 属性，则调用该方法后， 元素的宽度和高度会改变为系统预设值。 已被 Element#absolutize 方法取代。

从 Prototype 1.6 开始，Position 对象已经完全被 Element 对象的相关方法所取代。 Position 对象提供了一系列方法用于解决 DOM 元素的位置和布局方面的问题。它主要是给第三方的 UI 库如 script.aculo.us 使用的。 方法 absolutize    [不推荐] absolutize(element) 转换元素的定位方式为绝对定位，并且不改变元素在页面中的位置。 译注：该方法使用代码 element.style.position = 'absolute' 改变定位方式。在改变定位方式后， 元素左上角的坐标仍会保持原来的位置，如果元素未设置初始的 width 和 height 属性，则调用该方法后， 元素的宽度和高度会改变为系统预设值。 clone  ...

undoPositioned undoPositioned(element) -> HTMLElement 设置 element 返回到在元素上应用 Element.makePositioned 方法之前的状态，返回元素本身。 对于 element 内具有绝对定位属性的子元素，调用该方法后，它们定位的基准位置将会更改为 element 最近的 CSS position 属性为 'absolute'、'relative' 或 'fixed' 的那个先代节点。 样例 <p>lorem […]</p> <div id="container"> <div id="element" style="position: absolute; top: 20px; left: 20px;"></div> </div> $('container').makePositioned(); // -> HTMLElem...

positionedOffset      [1.6] positionedOffset(element) -> [Number, Number] 或 { left: Number, top: Number } 以 element 的容器块（Containing Block）节点（译注：距离元素最近的 CSS position 属性为 relative 或 absolute 的先代节点）为坐标原点，返回 element 的坐标偏移值（元素的容器块节点可通过 Element#getOffsetParent 方法获取）。 译注：假定返回值为 offset，则 X 轴坐标可通过 offset[0] 获取，也可以通过 offset.left 获取，Y 轴坐标可通过 offset[1] 获取，也可通过 offset.top 获取。 这个方法其实是累加元素及其所有父元素的 offsetLeft 和 offsetTop，直...