`

position定位的相关知识

cssjquery 
阅读更多
  1. 在给元素定位之前，我们首先要了解一些CSS定位相关的知识。  
  2. 在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进行层次分级。  
  3. fixed 固定定位，这里他所固定的对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。CSS中定位的层叠分级：z-index: auto | namber  
  4. relative | absolute | static  | fixed这四种定位的方式不一样，我们要找到元素的位置的方法也会随之不一样。  
  5. Dom元素提供了三种方式来定位元素：offset，scroll，Client，  
  6.    
  7. 图 转自（http://www.cnblogs.com/believe3301/archive/2008/07/19/1246806.html）   
  8. Dom元素对于offset提供了offsetParent、offsetTop、offsetLeft、offsetWidth、offsetHeight五个方法来定位于元素的相对位置。  
  9. offsetParent 是指当前元素的相对定位的元素。在IE和FF中定义和解释不一样。在IE中定义为获取定义对象 offsetTop 和 offsetLeft 属性的容 器对象的引用。大多数时候offsetParent返回body元素。在IE5中，td的offsetParent是table。可以看出IE中的相对定 位与绝对定位的区别不大。都是相对于最上层的元素来定位。在FF中获取文档层次中最近的元素。如果这个元素没有定位，那么就根元素。  
  10. offsetParent、 parentNode（IE:parentElement）都是指元素的父节点。它们的针对的目标是不一样，功能也不一样。parentNode就是取文 档层次中包含该节点的最近节点（直接的父节点）。在FF中对于Attr, Document, DocumentFragment, Entity,和 Notation这些父节点，其 parentNode返回null 。还有如果没有附加到文档树的元素也是返回 null 。  
  11.    offsetParent 是指可视的父节点。如 <body><form><input type=’’’text’ id=’AA’/>& lt;/form></body>。AA的offsetParent是body，而parentNode则是form。在IE中一般都 是body。  
  12. offsetLeft和offsetTop是指当前元素left或top边到offsetParent的left或top边的距离，包含了当前元素的margin和其offsetParent的padding。不包含offsetParent的border的宽度。  
  13. offsetWidth、 offsetHeight与offsetLeft、offsetTop的相对offsetParent的方式不一样，它们就是当前元素自身的宽度或高度。 它包含border、padding、scrollBar(显示的话)和内容的size(CSS中设定的元素的高度，IE中CSS size指的是包含 border的内容大小)。  
  14. 分析了offset，我们可以发现offsetLeft、 offsetTop与CSS中top,left的属性有相通性，offsetLeft、offsetTop只能取值。而我们可以通过CSS中 top,left的属性来设定一个元素的相对其它元素的位置（绝对定位，就是相对于body）。  
  15.   
  16.  Dom 元素对于scroll提供了scrollWidth、scrollHeigth、scrollTop、scrollLeft。这一组是对于scroll的 元素进行操作的。Scroll的Width、Heigth是指元素真实的宽度和高度，它包含被scroll起来的部分。而scrollTop、 scrollLeft则是被卷起来的部分的大小。  
  17.  Dom元素对于scroll提供了 clientWidth、clientHeigth、clientTop、clientLeft。这一组是对于client进行操作的。 clientWidth、clientHeigth是元素的内容可视区域的高度或宽度。包含padding，不包含scrollbar 、border、 margin。可以看出是元素可视的区域。IE，FF是一样的。clientTop、clientLeft可以看做是topborder或 left border的大小。  
  18.   
  19. 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。   
  20. Jquery针对于offsetParent提供了一个改进的方法。它还是在浏览器的offsetParent基础之上多加了一个判断的处理，筛选其有可能会是static 的节点。觉得这样做的意义不大。除了table,tr,td之外，浏览器的offsetParent是body的可能性很大。这是一个不确定的。在使用中是要注意的。  
  21. //找到this[0]中元素第一个能根据CSS中的top,left能设定位置的父辈节点。   
  22.     offsetParent: function() {  
  23.         var offsetParent = this [ 0 ].offsetParent || document.body;  
  24.     while  ( offsetParent && (!/^body|html$/i.test(offsetParent.tagName)   
  25. && jQuery.css(offsetParent, 'position' ) ==  'static' ) )  
  26.         offsetParent = offsetParent.offsetParent;  
  27.         return  jQuery(offsetParent);  
  28.     }  
  29.   
  30. 其实觉得最好的方法还是直接相对于body的来定位。这样的定位是确定的。但是浏览器在计算这个值会有点问题，而且每种浏览器的实现方式不一样，很难兼容。Jquery提供了一个相对于文档的起始位置的offset方法。  
  31.   
  32. //元素相对于文档的起始位置的offset   
  33. jQuery.fn.offset = function() {  
  34.     var left = 0 , top =  0 , elem =  this [ 0 ], results;  
  35.     if  ( elem ) with ( jQuery.browser ) {  
  36.         var parent    = elem.parentNode,    offsetChild  = elem,  
  37.           offsetParent = elem.offsetParent,  
  38.          doc       = elem.ownerDocument,  
  39.          safari2   = safari && parseInt(version) < 522    
  40. && !/adobeair/i.test(userAgent),  
  41.        css          = jQuery.curCSS,  
  42.        fixed        = css(elem, "position" ) ==  "fixed" ;  
  43.   
  44.  //在IE中有的元素可以通过getBoundingClientRect来获得元素相对于client的rect.   
  45. if  ( !(mozilla && elem == document.body) && elem.getBoundingClientRect ) { //IE  http://msdn.microsoft.com/en-us/library/ms536433.aspx    ①   
  46.     var box = elem.getBoundingClientRect();  
  47.     // 加上document的scroll的部分尺寸到left,top中。   
  48.     add(box.left + Math.max(  
  49. doc.documentElement.scrollLeft, doc.body.scrollLeft),  
  50.         box.top  + Math.max(  
  51. doc.documentElement.scrollTop,  doc.body.scrollTop));  
  52.             //IE中会自动加上2px的border,这里是去掉document的边框大小。   
  53.             //http://msdn.microsoft.com/en-us/library/ms533564(VS.85).aspx   
  54.     /The difference between the offsetLeft and clientLeft properties  
  55. // is the border of the object   
  56.     add( -doc.documentElement.clientLeft,   
  57. -doc.documentElement.clientTop );  
  58.     } else  {                                                               ②  
  59. //通过遍历当前元素offsetParents来计算其在文档中的位置（相对于文档的起始位置）   
  60.     add( elem.offsetLeft, elem.offsetTop );//初始化元素left,top    ③      //很多浏览器的offsetParent是直接指向body。不过有的是指向最近的可视的父节点。   
  61.     while  ( offsetParent ) {     //加上父节点的偏移                         
  62.         add( offsetParent.offsetLeft, offsetParent.offsetTop );  ④       // Mozilla系列offsetLet或offsetTop不包含offsetParent的边框。要加上   
  63.      //但在在table中又会自动加上。   
  64.        if  ( mozilla && !/^t(able|d|h)$/i.test(offsetParent.tagName)  
  65.  || safari && !safari2 )  
  66.         border( offsetParent );//增加offsetParent的border          ⑤   
  67.       // 对于CSS设定为fixed相对于client的定位，加上document.scroll.   
  68.       if  ( !fixed && css(offsetParent,  "position" ) ==  "fixed"  )  
  69.                     fixed = true ;  
  70.       //改变子节点变量offsetChild，再改变offsetParent变量的指向。   
  71.        offsetChild  = /^body$/i.test(offsetParent.tagName) ?   
  72. offsetChild : offsetParent;               
  73.             offsetParent = offsetParent.offsetParent;  
  74.         }  
  75.     // 减去处理每一层不显示的scroll的部分。   
  76.     // 因为一个元素的size(CSS中指定的）是scroll之前的。   
  77.     // 如果scroll，offsetLet或offsetTop会包含这部分被卷起的。             
  78.     while  ( parent && parent.tagName   
  79. && !/^body|html$/i.test(parent.tagName) ) {       ⑥  
  80.     // 如果parent的display的属性不为inline|table，减去它的scroll.            if ( !/^inline|table.*$/i.test(css(parent, "display")) )   
  81.         // 减去 parent scroll offsets   
  82.         add( -parent.scrollLeft, -parent.scrollTop );  
  83.         // 如果overflow != "visible.在Mozilla 中就不会加上border.s   
  84.         if  ( mozilla && css(parent,  "overflow" ) !=  "visible"  )  
  85.                 border( parent );                 
  86.             parent = parent.parentNode;  
  87.             }  
  88.               
  89.     //Safari <= 2，在CSS中position为fiexed或者body的position==absolute，   
  90.     //会重复加上body offset。Mozilla在Position！=absolute的时候也会重复   
  91. if  ( (safari2 && (fixed || css(offsetChild,  "position" ) ==  "absolute" ))   
  92.  || (mozilla && css(offsetChild, "position" ) !=  "absolute" ) )  
  93.     add( -doc.body.offsetLeft, -doc.body.offsetTop );              ⑦  
  94.                       
  95.     //fixed 加上document scroll。   
  96. //因为fixed是scroll的时候也是相对于client不变。所以要加上   
  97.     if  ( fixed )                                                         ⑧  
  98.     add(Math.max(doc.documentElement.scrollLeft, doc.body.scrollLeft),  
  99.         Math.max(doc.documentElement.scrollTop,  doc.body.scrollTop));  }         
  100.     results = { top: top, left: left };  
  101. }  
  102. function border(elem) {  
  103.         add( jQuery.curCSS(elem, "borderLeftWidth" ,  true ), jQuery.curCSS(elem,  "borderTopWidth" ,  true ) );  
  104.     }  
  105. function add(l, t) {  
  106.         left += parseInt(l, 10 ) ||  0 ;  
  107.         top += parseInt(t, 10 ) ||  0 ;  
  108.     }  
  109. return  results;  
  110. };  
  111. 上 面的代码①采用IE内部提供了特有的方法来找到相对body的Offset。这样做肯定是提高在IE中效率。②③④⑤⑥⑦⑧处是采用通用的处理方法来计 算。对于一个元素的offset,加上其所有offsetParent的offset和border。这样就能计算出相对于body的offset。但是 这样在scroll的情况下是行不通的。因为有scroll的卷起来的部分也被计算了进去，对于每个元素都要减去这一部分的大小。  
  112. ⑧处我们可以看出如果有元素是fixed的position。说明其会随着documentElement.scroll而改变位置。因此加上documentElement.scroll。得出其正确的位置。  
  113.   
  114. Jquery 中的position方法是计算当前元素相对于其offsetParent的offset值。与dom元素的offset不一样的地方，它是建立在 jquery.offset的基础之上，同时还不包括其自身的margin。对于box的模式来讲，是margin是元素的最外边，而不是 border。  
  115. jQuery.fn.extend({position: function() {  
  116.     var left = 0 , top =  0 , results;  
  117.     if  (  this [ 0 ] ) {          
  118.         var offsetParent = this .offsetParent(), // Get *real* offsetParent   
  119.           offset   = this .offset(), // Get correct offsets   
  120.         parentOffset = /^body|html$/i.test(offsetParent[0 ].tagName)  
  121.  ? { top: 0 , left:  0  } : offsetParent.offset();  
  122.             offset.top  -= num( this ,  'marginTop'  );  
  123.             offset.left -= num( this ,  'marginLeft'  );  
  124.             parentOffset.top  += num( offsetParent, 'borderTopWidth'  );  
  125.             parentOffset.left += num( offsetParent, 'borderLeftWidth'  );  
  126.             results = {  
  127.                 top:  offset.top  - parentOffset.top,  
  128.                 left: offset.left - parentOffset.left  
  129.             };  
  130.         }  
  131.         return  results;  
  132.     },  
  133.   
  134. Jquery还提供了两个关于scroll的方法， scrollLeft and scrollTop：  
  135. // Create scrollLeft and scrollTop methods   
  136. jQuery.each( ['Left' ,  'Top' ], function(i, name) {  
  137.     var method = 'scroll'  + name;     
  138.     jQuery.fn[ method ] = function(val) {  
  139.         if  (! this [ 0 ])  return ;  
  140.         return  val != undefined ?    // Set the scroll offset   
  141.             this .each(function() {  
  142.                 this  == window ||  this  == document ?  
  143.                     window.scrollTo(  
  144.                         !i ? val : jQuery(window).scrollLeft(),  
  145.                          i ? val : jQuery(window).scrollTop()  
  146.                     ) :  
  147.                     this [ method ] = val;  
  148.             }) : // Return the scroll offset   
  149.   
  150.             this [ 0 ] == window ||  this [ 0 ] == document ?  
  151.                 self[ i ? 'pageYOffset'  :  'pageXOffset'  ] ||  
  152.                     jQuery.boxModel && document.documentElement[ method ]   
  153. ||document.body[ method ] :  
  154.                 this [ 0 ][ method ];  
  155.     }; 
分享到：
| offsetLeft,Left,clientLeft的区别
评论
发表评论

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

相关推荐

    浅析CSS--元素重叠及position定位的z-index顺序.pdf

    本文将深入探讨元素重叠的背景知识，以及`position`定位下的`z-index`顺序。 首先，HTML文档中的元素默认遵循“普通流”（normal flow），即按照它们在文档中的顺序排列。但是，当给元素添加`float`（如`left`或`...

    9387787GPSposition_gps定位_matlab_

    标题 "9387787GPSposition_gps定位_matlab_" 暗示这是一个使用 MATLAB 实现 GPS 定位的项目。描述中的 "matlab实现卫星定位，副程序说明等文件" 提示我们，这个压缩包包含了一系列与 GPS 定位相关的 MATLAB 代码和...

    全面剖析CSS Position定位

    CSS Position定位是CSS布局中的重要概念，它决定了元素在页面中的具体位置。定位方式有多种，包括静态定位(static)、相对定位(relative)、绝对定位(absolute)、固定定位(fixed)以及继承定位(inherit)。每种定位方式...

    GPS-position

    【GPS-position】是一个与地理位置服务相关的主题，特别关注在谷歌地图上进行的放大、缩小以及效果切换等操作。在这个主题中，我们将深入探讨GPS（全球定位系统）的基本原理，谷歌地图的功能，以及如何通过交互来...

    2-landmark-Fix-Position.rar_FIX_landmark 定位_船舶_船舶模型

    7. 教育和培训：这个压缩包内的"两方位定位的理论和模型.nh"文件可能是教学材料或案例研究，旨在帮助学习者理解和掌握两方位定位的实践技巧和理论知识。 综上所述，"2-landmark-Fix-Position.rar"包含的资源为学习...

    html3-position

    以下是一些关于HTML元素定位的关键知识点： 1. **静态定位（Static Positioning）**：这是默认的定位方式，元素根据正常的文档流进行布局。`position: static;` 不会改变元素的原始位置。 2. **相对定位（Relative...

    GPS定位基本原理

    因为根据立体几何知识，三维空间中，三对数据就可以确定一个点，但是由于时间和速度的误差，需要四对参数来提高定位精度。 GPS 定位技术有很多应用，如导航、测绘、交通管理等。 GPS 系统的发展历程是从美国军方的...

    获取元素绝对位置 position

    这里，我们将深入探讨相关知识，并参考提供的博客链接以及相关的HTML文件。 首先，元素的绝对位置是指元素左上角相对于浏览器窗口的X和Y坐标。这不包括任何滚动偏移，它是元素在页面完全加载后，不考虑CSS相对定位...

    GPS_position.rar_GPS_GPS position_GPS_POSITION_GPS_Positi__debug

    标题中的"GPS_position.rar_GPS_GPS position_GPS_POSITION_GPS_Positi__debug"显然与GPS定位技术相关，特别是关于如何从GPS数据中获取和计算地理位置信息。这里的"_debug"可能表示这是一个包含调试信息的版本，用于...

    gps定位代码

    下面将详细探讨这一领域的相关知识点。 首先，GPS（全球定位系统）定位是通过接收至少四颗GPS卫星的信号来确定设备的位置、速度和时间信息。在JavaScript中，我们可以使用HTML5的Geolocation API获取用户的地理位置...

    sol.rar_GPS position_Using GPS_position finding

    标签进一步强调了关键词“gps_position using”和“position finding”，这与计算和解析GPS数据以确定地理位置的方法密切相关。 在GPS定位中，伪距（pseudorange）是GPS接收器到卫星的距离估计，考虑到信号从卫星...

    HTML基本布局定位

    本篇分享详细介绍了HTML基本布局与定位的相关知识，包括网页的基本结构、不同的定位方式及其区别。通过合理地使用这些布局和定位技术，开发者可以创建出美观且功能丰富的网页。同时，了解各种CSS属性的作用也是十分...

    Handbook of position location _ theory, practice and advance

    根据提供的文件信息，我们可以从《位置定位手册：理论、实践与进展》这本书中提取出一些重要的IT知识领域，特别是与定位技术（如GPS）相关的原理和技术。以下是对这些知识点的详细解析： ### 1. 定位技术概述 - **...

    HTML的地理定位代码

    HTML的地理定位代码是网页...通过理解并运用这些知识，你就能在网页中实现基本的地理定位功能，为用户提供更个性化的体验。当然，这只是一个基础的起点，实际开发中还需要考虑性能优化、用户体验、多平台兼容性等问题。

    CSS+Js定位与相对定位

    在实际应用中，了解并熟练掌握这些知识能够帮助开发者创建更加动态和交互性强的网页。 首先，我们来深入理解CSS的定位机制。CSS定位主要包括静态定位、相对定位、绝对定位、固定定位和粘性定位。其中，相对定位是...

    百度定位.zip_html5 定位_定位_百度定位

    在“描述”中也提到，使用Chrome浏览器时定位可能稍慢，这可能与浏览器实现的定位策略或用户许可的延迟有关。 总的来说，"百度定位.zip"文件包含的资源可以帮助开发者理解如何在HTML5环境中结合百度地图API进行用户...

    GPS定位基本原理[归纳].pdf

    本文将从编程人员的角度出发，介绍 GPS 定位的基本原理，包括数学模型、定位过程和相关技术细节。 一、GPS 定位数学模型 GPS 定位的数学模型是程序员最关心的问题。这个模型可以简单地表示为： Location = ...

    简明CSS定位属性position

    综上所述，CSS的position属性是实现复杂布局的基石，通过不同的值和相关的辅助属性，可以实现页面元素的精确定位和层叠效果。开发者需要根据布局需求和预期的页面效果来选择合适的定位方式，并结合z-index、top、...

    HTML浮动与定位

    ### HTML浮动与定位知识点详解 #### 一、元素的浮动 **1.1 浮动的概念** 元素的浮动是CSS中一个重要的概念，它可以让设置了浮动属性的元素脱离标准文档流，移动到指定的位置。浮动主要用于创建更复杂的布局结构。...

    Android高德地图定位移动定位

    在Android开发中，集成高德地图进行移动定位是一项常见的需求，尤其对于开发地理位置相关的应用来说至关重要。本示例主要讲解如何在Android应用中使用高德地图API实现2D定位功能，适合初学者入门。首先，我们需要...

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