关于offset,scroll,position

Posted 逆水行舟,心如止水。

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于offset,scroll,position相关的知识,希望对你有一定的参考价值。

在看1.11.0的JQuery文档的时候offset的介绍是

            获取匹配元素在当前视口的相对偏移。

一直以为是相对于视口的值。后面在用到的时候发现原来是到页面顶部的值。offset().top;offset().left;都是针对页面文档的.

scrollTop的介绍是:

          获取匹配元素相对滚动条顶部的偏移。

和offset的介绍相比少了一个“在”,这就是自己第一次理解offset时的误区了。

 

position的介绍是:

          获取匹配元素相对父元素的偏移。position().top;position().left

说到position想到之前遇到对一个元素设置position:absolute的时候会从它的父级开始找,如果碰到父级或者更高的爷级元素有position属性的时候,会相对与找到的这个元素来进行top和left

的定位。以前一直以为position的值必须为relative才可以让它的子元素相对于它来进行position:absolute.其实父元素的position:fixed的时候其子元素也可以相对其进行绝对定位。但是fixed可能一些老的浏览器不支持,没去研究。

z-index是定位元素的层叠属性,较大的z-index会覆盖在较小的上,前提是此属性仅仅作用于position属性值为relative或者absolute的对象。

以上是关于关于offset,scroll,position的主要内容,如果未能解决你的问题,请参考以下文章

WebApls-元素(offset, client, scroll)

.scroll 函数中的 .offset 函数在 jQuery 中不起作用

client,offset.scroll系列/案例

offset系列,scroll系列

关于heightwidthtop

JSjs进阶--之JS三大家族:offset家族 Scroll家族 client家族