`
jljlpch
  • 浏览: 323950 次
  • 性别: Icon_minigender_1
  • 来自: 南昌
社区版块
存档分类
最新评论

jquery position

jQueryCSSIESafari浏览器 
阅读更多 
5.2.3 position     
                               prk/彭仁夔   08-08-25
在给元素定位之前，我们首先要了解一些CSS定位相关的知识。
在CSS中关于定位的内容是：position:relative | absolute | static | fixed 。static 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。relative 不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级。absolute 脱离文档流，通过 top,bottom,left,right 定位。选取其最近的父级定位元素，当父级 position 为 static 时，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。
fixed 固定定位，这里他所固定的对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。CSS中定位的层叠分级：z-index: auto | namber
relative | absolute | static | fixed这四种定位的方式不一样，我们要找到元素的位置的方法也会随之不一样。
Dom元素提供了三种方式来定位元素：offset，scroll，Client，
 
图 转自（http://www.cnblogs.com/believe3301/archive/2008/07/19/1246806.html）
Dom元素对于offset提供了offsetParent、offsetTop、offsetLeft、offsetWidth、offsetHeight五个方法来定位于元素的相对位置。
offsetParent是指当前元素的相对定位的元素。在IE和FF中定义和解释不一样。在IE中定义为获取定义对象 offsetTop 和 offsetLeft 属性的容器对象的引用。大多数时候offsetParent返回body元素。在IE5中，td的offsetParent是table。可以看出IE中的相对定位与绝对定位的区别不大。都是相对于最上层的元素来定位。在FF中获取文档层次中最近的元素。如果这个元素没有定位，那么就根元素。
offsetParent、parentNode（IE:parentElement）都是指元素的父节点。它们的针对的目标是不一样，功能也不一样。parentNode就是取文档层次中包含该节点的最近节点（直接的父节点）。在FF中对于Attr, Document, DocumentFragment, Entity,和Notation这些父节点，其 parentNode返回null。还有如果没有附加到文档树的元素也是返回null。
   offsetParent是指可视的父节点。如 <body><form><input type=’’’text’ id=’AA’/></form></body>。AA的offsetParent是body，而parentNode则是form。在IE中一般都是body。
offsetLeft和offsetTop是指当前元素left或top边到offsetParent的left或top边的距离，包含了当前元素的margin和其offsetParent的padding。不包含offsetParent的border的宽度。
offsetWidth、offsetHeight与offsetLeft、offsetTop的相对offsetParent的方式不一样，它们就是当前元素自身的宽度或高度。它包含border、padding、scrollBar(显示的话)和内容的size(CSS中设定的元素的高度，IE中CSS size指的是包含border的内容大小)。
分析了offset，我们可以发现offsetLeft、offsetTop与CSS中top,left的属性有相通性，offsetLeft、offsetTop只能取值。而我们可以通过CSS中top,left的属性来设定一个元素的相对其它元素的位置（绝对定位，就是相对于body）。

 Dom元素对于scroll提供了scrollWidth、scrollHeigth、scrollTop、scrollLeft。这一组是对于scroll的元素进行操作的。Scroll的Width、Heigth是指元素真实的宽度和高度，它包含被scroll起来的部分。而scrollTop、scrollLeft则是被卷起来的部分的大小。
 Dom元素对于scroll提供了clientWidth、clientHeigth、clientTop、clientLeft。这一组是对于client进行操作的。clientWidth、clientHeigth是元素的内容可视区域的高度或宽度。包含padding，不包含scrollbar 、border、margin。可以看出是元素可视的区域。IE，FF是一样的。clientTop、clientLeft可以看做是topborder或left border的大小。

offsetParent的名字的元素能计算相对位移的父节点，那么对于CSS的定位方式，哪一些是可以计算位移呢，能计算元素和其父节点之间的位移量，首先要其父节点能定位。这个定位就是在CSS中能采用top,left来定其在文档的位置。Body是肯定可以的（0，0）。Body也是元素的终结offsetParent（没有找到就是它了）,absolute、 relative、 fixed都采用可以top,left来定其在文档的位置。也是能计算其位置。而static是不需要top,left来设定其位置， Offset是相对已经定位的元素的位移。元素的offsetParent是其父辈节点中的postiont!= Static的节点。在IE中http://msdn.microsoft.com/zh-cn/library/system.windows.forms.htmlelement.offsetparent(VS.80).aspx，可以看到其不支持fixed的offsetParent。在mozilla中http://developer.mozilla.org/en/DOM/element.offsetParent，可以看出其给出的如果元素没有定位（non-positioned）就是body。
Jquery针对于offsetParent提供了一个改进的方法。它还是在浏览器的offsetParent基础之上多加了一个判断的处理，筛选其有可能会是static的节点。觉得这样做的意义不大。除了table,tr,td之外，浏览器的offsetParent是body的可能性很大。这是一个不确定的。在使用中是要注意的。
//找到this[0]中元素第一个能根据CSS中的top,left能设定位置的父辈节点。
	offsetParent: function() {
		var offsetParent = this[0].offsetParent || document.body;
	while ( offsetParent && (!/^body|html$/i.test(offsetParent.tagName) 
&& jQuery.css(offsetParent, 'position') == 'static') )
		offsetParent = offsetParent.offsetParent;
		return jQuery(offsetParent);
	}

其实觉得最好的方法还是直接相对于body的来定位。这样的定位是确定的。但是浏览器在计算这个值会有点问题，而且每种浏览器的实现方式不一样，很难兼容。Jquery提供了一个相对于文档的起始位置的offset方法。

//元素相对于文档的起始位置的offset
jQuery.fn.offset = function() {
	var left = 0, top = 0, elem = this[0], results;
	if ( elem ) with ( jQuery.browser ) {
		var parent    = elem.parentNode,    offsetChild  = elem,
		  offsetParent = elem.offsetParent,
		 doc       = elem.ownerDocument,
		 safari2   = safari && parseInt(version) < 522 
&& !/adobeair/i.test(userAgent),
	   css          = jQuery.curCSS,
	   fixed        = css(elem, "position") == "fixed";

 //在IE中有的元素可以通过getBoundingClientRect来获得元素相对于client的rect.
if ( !(mozilla && elem == document.body) && elem.getBoundingClientRect ) {//IE  http://msdn.microsoft.com/en-us/library/ms536433.aspx    ①
	var box = elem.getBoundingClientRect();
	// 加上document的scroll的部分尺寸到left,top中。
	add(box.left + Math.max(
doc.documentElement.scrollLeft, doc.body.scrollLeft),
		box.top  + Math.max(
doc.documentElement.scrollTop,  doc.body.scrollTop));
            //IE中会自动加上2px的border,这里是去掉document的边框大小。
			//http://msdn.microsoft.com/en-us/library/ms533564(VS.85).aspx
	/The difference between the offsetLeft and clientLeft properties
// is the border of the object
	add( -doc.documentElement.clientLeft, 
-doc.documentElement.clientTop );
	} else {                                                               ②
//通过遍历当前元素offsetParents来计算其在文档中的位置（相对于文档的起始位置）
	add( elem.offsetLeft, elem.offsetTop );//初始化元素left,top	  ③		 //很多浏览器的offsetParent是直接指向body。不过有的是指向最近的可视的父节点。
	while ( offsetParent ) {	//加上父节点的偏移			            
		add( offsetParent.offsetLeft, offsetParent.offsetTop );	 ④		 // Mozilla系列offsetLet或offsetTop不包含offsetParent的边框。要加上
	 //但在在table中又会自动加上。
	   if ( mozilla && !/^t(able|d|h)$/i.test(offsetParent.tagName)
 || safari && !safari2 )
		border( offsetParent );//增加offsetParent的border          ⑤
	  // 对于CSS设定为fixed相对于client的定位，加上document.scroll.
	  if ( !fixed && css(offsetParent, "position") == "fixed" )
					fixed = true;
	  //改变子节点变量offsetChild，再改变offsetParent变量的指向。
	   offsetChild  = /^body$/i.test(offsetParent.tagName) ? 
offsetChild : offsetParent;				
	     	offsetParent = offsetParent.offsetParent;
		}
	// 减去处理每一层不显示的scroll的部分。
	// 因为一个元素的size(CSS中指定的）是scroll之前的。
	// 如果scroll，offsetLet或offsetTop会包含这部分被卷起的。			
	while ( parent && parent.tagName 
&& !/^body|html$/i.test(parent.tagName) ) {       ⑥
	// 如果parent的display的属性不为inline|table，减去它的scroll.			if ( !/^inline|table.*$/i.test(css(parent, "display")) )
		// 减去 parent scroll offsets
		add( -parent.scrollLeft, -parent.scrollTop );
		// 如果overflow != "visible.在Mozilla 中就不会加上border.s
		if ( mozilla && css(parent, "overflow") != "visible" )
				border( parent );				
			parent = parent.parentNode;
			}
			
	//Safari <= 2，在CSS中position为fiexed或者body的position==absolute，
	//会重复加上body offset。Mozilla在Position！=absolute的时候也会重复
if ( (safari2 && (fixed || css(offsetChild, "position") == "absolute")) 
 ||	(mozilla && css(offsetChild, "position") != "absolute") )
	add( -doc.body.offsetLeft, -doc.body.offsetTop );              ⑦
					
	//fixed 加上document scroll。
//因为fixed是scroll的时候也是相对于client不变。所以要加上
	if ( fixed )                                                         ⑧
	add(Math.max(doc.documentElement.scrollLeft, doc.body.scrollLeft),
		Math.max(doc.documentElement.scrollTop,  doc.body.scrollTop));	}		
	results = { top: top, left: left };
}
function border(elem) {
		add( jQuery.curCSS(elem, "borderLeftWidth", true), jQuery.curCSS(elem, "borderTopWidth", true) );
	}
function add(l, t) {
		left += parseInt(l, 10) || 0;
		top += parseInt(t, 10) || 0;
	}
return results;
};
上面的代码①采用IE内部提供了特有的方法来找到相对body的Offset。这样做肯定是提高在IE中效率。②③④⑤⑥⑦⑧处是采用通用的处理方法来计算。对于一个元素的offset,加上其所有offsetParent的offset和border。这样就能计算出相对于body的offset。但是这样在scroll的情况下是行不通的。因为有scroll的卷起来的部分也被计算了进去，对于每个元素都要减去这一部分的大小。
⑧处我们可以看出如果有元素是fixed的position。说明其会随着documentElement.scroll而改变位置。因此加上documentElement.scroll。得出其正确的位置。

Jquery中的position方法是计算当前元素相对于其offsetParent的offset值。与dom元素的offset不一样的地方，它是建立在jquery.offset的基础之上，同时还不包括其自身的margin。对于box的模式来讲，是margin是元素的最外边，而不是border。
jQuery.fn.extend({position: function() {
	var left = 0, top = 0, results;
	if ( this[0] ) {		
		var offsetParent = this.offsetParent(),// Get *real* offsetParent
		  offset   = this.offset(),// Get correct offsets
		parentOffset = /^body|html$/i.test(offsetParent[0].tagName)
 ? { top: 0, left: 0 } : offsetParent.offset();
			offset.top  -= num( this, 'marginTop' );
			offset.left -= num( this, 'marginLeft' );
			parentOffset.top  += num( offsetParent, 'borderTopWidth' );
			parentOffset.left += num( offsetParent, 'borderLeftWidth' );
			results = {
				top:  offset.top  - parentOffset.top,
				left: offset.left - parentOffset.left
			};
		}
		return results;
	},

Jquery还提供了两个关于scroll的方法， scrollLeft and scrollTop：
// Create scrollLeft and scrollTop methods
jQuery.each( ['Left', 'Top'], function(i, name) {
	var method = 'scroll' + name;	
	jQuery.fn[ method ] = function(val) {
		if (!this[0]) return;
		return val != undefined ? 	// Set the scroll offset
			this.each(function() {
				this == window || this == document ?
					window.scrollTo(
						!i ? val : jQuery(window).scrollLeft(),
						 i ? val : jQuery(window).scrollTop()
					) :
					this[ method ] = val;
			}) : // Return the scroll offset

			this[0] == window || this[0] == document ?
				self[ i ? 'pageYOffset' : 'pageXOffset' ] ||
					jQuery.boxModel && document.documentElement[ method ] 
||document.body[ method ] :
				this[0][ method ];
	};

 

分享到：
| jquery wrap
评论
1 楼 zxc005 2009-01-25  
谢谢，分析地很细致！
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery Position方法使用和兼容性

    jQuery的Position方法是用于获取匹配元素相对于其最近的定位祖先元素的位置。这个方法非常有用，尤其是在动态元素布局和对齐方面。要正确使用Position方法，并确保在各种浏览器中都能获得一致的表现，需要对它的功能...

    jQuery position() 函数详解以及jQuery中position函数的应用

    jQuery的`position()`函数是用于获取元素在DOM结构中相对于其最近的定位祖先元素（即position属性设置为absolute、relative或fixed的元素）的偏移坐标。这个函数对于需要精确控制元素位置的情况非常有用，例如在实现...

    jQuery.position()方法获取不到值的安全替换方法

    在jQuery中，获取元素位置的方法主要有两个：.position()和.offset()。.position()方法用于获取元素相对于其最近的已定位的父元素的位置，而.offset()方法则是获取相对于文档的绝对位置。然而，开发者在使用....

    理解Jquery 的offset与position方法

    在jQuery中，`offset()`和`position()`方法是用来获取元素位置的重要工具，它们的主要区别在于参考对象的不同。理解这两个方法的用法对于进行精确的页面布局和动态效果处理至关重要。 `offset()`方法返回的是匹配...

    jquery插件jquery-ui-1.8.2.custom.min.js

    在1.8.2这个版本中，jQuery UI包含了多个模块，如Widgets（组件）、Effects（特效）、Position（定位）和Utilities（工具函数）。Widgets是jQuery UI的核心，包括Accordion（手风琴效果）、Autocomplete（自动补全）...

    jquery splitter 动态分割区域布局，支持动态拖拉，功能强大，简单易用

    《jQuery Splitter：动态分割区域布局的神器》 在Web开发中，我们常常需要实现页面区域的动态分割，以便用户可以自由调整各个部分的大小。jQuery Splitter插件就是这样一个强大的工具，它允许用户通过拖动分割线来...

    jQuery.mmenu-jquery.mobile最好看的侧边菜单

    position: 'left', slidingSubmenus: false }); }); ``` **总结** 结合使用jQuery Mobile和jQuery.mmenu，开发者可以快速构建出具有专业级用户体验的移动应用或网站。jQuery Mobile提供了丰富的UI组件，而...

    jquery拖动图片移动拼图小游戏

    **jQuery 拖动图片移动拼图小游戏详解** 在前端开发中，制作一款基于jQuery的拖动图片拼图游戏是一项有趣的挑战，同时也是一种提升用户体验的好方法。本游戏利用JavaScript和jQuery的强大功能，允许用户通过拖放...

    jQuery jQuery-UI

    5. **定位**：包含了实用的定位算法，如`.position()`和`.offset()`，用于精确控制元素的位置。 **文件内容概览** - **licence_gpl.txt, license_commercial.txt**：这两个文件可能分别包含了GPL（GNU General ...

    jquery API 和 jquery ui API

    5. **定位（Positioning）**：jQuery UI 的 `position()` 函数可以帮助准确地定位元素，支持相对于其他元素或窗口的定位。 结合jQuery和jQuery UI，开发者可以构建功能丰富、交互性强的Web应用，同时降低代码复杂性...

    电子签章盖章之jQuery插件

    本文将深入探讨基于jQuery的zsign插件，一种用于实现仿真实体印章效果的工具，帮助用户在电子文档上实现方便快捷的盖章操作。 jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax...

    jQuery实现公司组织结构图

    使用`display: flex`和`margin`属性可以实现线性排列，而`position: relative/absolute`和`transform`可以用于创建分支状结构。 3. **jQuery选择器与遍历**：jQuery的选择器功能强大，能让你快速定位到HTML结构中的...

    jQuery的position()方法详解

    jQuery的`position()`方法是一个非常实用的工具，用于获取元素在页面或其定位父元素中的精确位置。这个方法主要用于获取元素的相对位置信息，对于进行动态布局和交互设计时非常有帮助。 `position()`方法的基本用法...

    jquery图片边框阴影浮动.rar_formerkld_jquery图片边框阴影浮动_js393.com_position2o

    "position2o"可能是指图片的定位方式，可能涉及到CSS的`position`属性，例如`relative`、`absolute`或`fixed`，以便在页面上精确控制图片的位置并实现浮动效果。 在"jiaoben393"这个文件中，可能包含了实现这一效果...

    可拖动的jQuery便签特效

    此外，还需要设置`position: absolute`或`position: fixed`以允许元素相对于其最近的定位祖先或窗口进行定位。 8. **图片资源**：在`effect.png`这个文件中，可能是用于装饰或增强便签视觉效果的图像。这些图像可以...

    jquery-ui-1.11.4完整版

    6. 位置（Position）：用于精确控制元素在页面上的位置，支持相对定位和绝对定位。 7. 进度条（Progressbar）：展示任务进度，可以是垂直或水平样式，适用于上传、下载等场景。 8. 排序列表（Sortable）：使列表项...

    jquery实现文字移动

    在JavaScript的世界里，jQuery是一个非常流行的库，它简化了DOM操作、事件处理、动画效果以及Ajax交互等任务。本教程将深入讲解如何使用jQuery来实现文字的左右来回移动效果，这是一个常见的动态效果，常用于网站的...

    jquery实现简单的人物跑动

    本教程将深入讲解如何使用jQuery来实现一个简单的人物跑动效果，这对于初学者来说是一个很好的起点。 首先，理解jQuery的核心概念至关重要。jQuery通过选择器选取DOM元素，然后对这些元素进行操作。例如，`$("#...

Magicbox
Global site tag (gtag.js) - Google Analytics