position定位的相关知识 -

lihaiming

浏览: 487861 次
性别:
来自: 上海

最近访客更多访客>>

zjut_wyj

jklwan

xlg123

409197623

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

position定位的相关知识

博客分类：

Jscript笔记
css
jQuery

css jquery

在给元素定位之前，我们首先要了解一些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’/>& lt;/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 ];
};

分享到：

10 款高质量的jQuery 表单验证插件 | offsetLeft,Left,clientLeft的区别

2011-12-19 15:39
浏览 1520
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

position定位的相关知识

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

position定位的相关知识

评论

发表评论

相关推荐

js浮点运算bug的解决办法

a href=#与 a href=javascript:void(0) 的区别

JS字符串替换函数全部替换方法

解决URL参数中的%问题（org.apache.tomcat.util.http.Parameters processParameters Paramete）

javascript用户密码加密,js密码加密

JavaScript 操作 Cookie

jquery取checkbox值

setTimeout()和setInterval()方法的区别？

JSONP一例

JS验证大全

使用jquery操作session方法分享

js 中获得session中的值

javascript

jQuery插件开发全解析，类级别与对象级别开发

JS Object类通用的属性与方法

jquery.validate.js使用之自定义表单验证规则

jquery validate日期与身份证验证实例

jquery.cookie() 方法的使用(读取、写入、删除)

封装jQuery Validate扩展验证方法

jQuery中 trigger() 使用心得

最近访客更多访客>>