`
desert3
  • 浏览: 2158884 次
  • 性别: Icon_minigender_1
  • 来自: 合肥
社区版块
存档分类
最新评论

jQuery offset,position,offsetParent,scrollLeft,scrollTop html控件定位 css position属

 
阅读更多
定位应用:点击一个按钮,然后在按钮的右边弹出一个提示框
1,提示框相对于屏幕进行定位,那么使用offset来取得当前按钮相对于body的top和left,然后通过$('body').prepend(tipContent);把提示控件加到body下
注意tipContent采用absolute定位,并设置top,left的值,当把tipContent加到body的最前面时,由于tipContent前面没有任何东西,因此它就是以body为基准根据top,left的值进行定位
$(this).offset().left;
$(this).offset().top;
$('body').prepend(tipContent);

2,提示框相对于点击的按钮进行定位(即提示框出现在按钮的旁边),那么使用position来取得当前按钮相对于offset parent的top和left,,然后通过$(this).after(tipContent);;把提示控件加到按钮的后面(兄弟节点),因此被追加的提示控件的offset parent和按钮的offset parent一定是相同的!,也就变相达到了提示控件相对于 按钮 进行定位的效果!

// 注意tipContent采用absolute定位,当把tipContent加到按钮后面后(兄弟节点,他们有相同的offset parent)

// absolute:绝对定位,元素相对于它的第一个被定位的祖先元素(offset parent非static)来进行定位,由于按钮和提示控件并排在一起,不管 被用来作为基准的第一个被定位的祖先元素(非static)是谁,按钮和提示控件相对于 基准控件的top,left距离都是可以简单地通过+-进行平移操作!
$(this).position().left;
$(this).position().top;
$(this).after(tipContent);


offset:偏移、平移、位移

offset():获取匹配元素集合中的第一个元素相对于document的当前坐标值(相对于body左上角的left, top的值)。
返回的对象包含两个整形属性:top 和 left。
如果把一个元素定位到已经存在的元素的上面(特别地做拖拽操作的时候), .offset()方法更加有用。

position():获取当前匹配元素集合中的第一个元素相对于offset parent的当前坐标值(相对于offset parent元素左上角的left, top的值)。
返回的对象包含两个整形属性:top 和 left。
如果要让一个元素靠近另外一个元素进行定位,并且这2个元素被包含在另外一个DOM元素中, .position()方法更加有用。

jquery不支持取得相对于隐藏元素、或者包含borders, margins, padding属性的body元素的坐标。(对offset()和position()方法都是!)

offsetParent():取得被定位后最近的祖先元素!
给你一个jQuery对象,它的offsetParent()方法会在 DOM树中搜索所有这个jQuery对象的祖先元素,并返回一个表示离这个元素最近的祖先元素的jQuery对象
一个元素说被定位指的是它包含一个CSS定位属性(position),并且其值为relative,absolute或者fixed其值不是css position属性的默认值static!

offsetParent属性返回一个对象的引用,这个对象是距离调用offsetParent的元素最近的(在包含层次中最靠近的),并且是已进行过CSS定位的容器元素。
如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素(在标准兼容模式下为html元素;在怪异呈现模式下为body元素)的引用。
当容器元素的style.display 被设置为 "none"时(译注:IE和Opera除外),offsetParent属性 返回 null。

scrollLeft():获取匹配元素集合中的第一个元素相对于水平滚动条左边的距离。
这个距离等于从被选中元素到水平滚动条左边的像素值。如果滚动条非常左、或者元素不能被滚动,那么这个值为0.

scrollTop():获取匹配元素集合中的第一个元素相对于纵向滚动条上边的距离。
这个距离等于从被选中元素到纵向滚动条上边的像素值。如果滚动条非常上、或者元素不能被滚动,那么这个值为0.

注意:当一个元素被隐藏后,调用scrollTop, scrollLeft()或者animate()方法是不会正常工作的。

css position属性:position属性指出一个元素的定位方法。有4种可能值:static, relative, absolute or fixed:
  • static:默认值,元素按照在文档流中出现的顺序渲染
  • absolute:绝对定位,元素相对于它的第一个被定位的祖先元素(非static)来进行定位
  • fixed:元素相对于浏览器window进行定位
  • relative:元素相对与它的正常位置进行定位,因此"left:20"就表示在元素正常位置的基础上,左移20像素的距离。


参考http://js8.in/602.html中的结论:
使用position()方法时事实上是把该元素当绝对定位来处理,获取的是该元素相当于最近的一个拥有绝对或者相对定位的父元素的偏移位置
使用position()方法时如果其所有的父元素都为默认定位(static)方式,则其处理方式和offset()一样,是当前窗口的相对偏移
使用offset()方法不管该元素如何定位,也不管其父元素如何定位,都是获取的该元素相对于当前视口的偏移
分享到:
评论

相关推荐

    jquery实现的拖拉控件,然后保存坐标

    `position()`函数返回元素相对于其最近的定位祖先(或`offsetParent`)的偏移量。 为了保存坐标,我们需要一个持久化存储机制。在这个项目中,使用XML文件来存储坐标数据可能是一种选择。XML是一种结构化的数据格式...

    用css样式固定表头和列

    为解决这一问题,可以采用CSS的定位属性,特别是`position`、`top`和`left`等属性,来使表头或某一列始终保持在可视区域内,即使页面滚动也依然可见。 ### CSS样式详解 #### 1. FixedTitleRow 类 此类应用于表头...

    对offsetLet,offsetTop,scrollLeft,scrollTop几个方法的理解

    `offsetParent` 返回当前元素的offsetParent元素,即最近的具有定位属性(position为relative、absolute或fixed)的祖先元素。如果当前元素没有这样的祖先元素,则`offsetParent`返回`null`。 #### 6. `scrollLeft`...

    Jquery中的offset()和position()深入剖析

    先看看这两个方法的定义。 offset(): 获取匹配元素在当前视口的相对... 先来看看在jquery框架源码里面,是怎么获得position()的: 代码如下: // Get *real* offsetParent var offsetParent = this.offsetParent(), /

    [原创] jQuery源码分析-17尺寸和大小 Dimensions & Offset

    - **返回值用法**:此方法与`.offset()`类似,但是`.position()`获取的是相对于最近的已定位父元素的偏移量,如果元素的父级元素都是默认的`static`定位,则相当于`.offset()`。 示例代码: ```javascript var ...

    JQuery新版中文手册

    JQuery开发手册 jQuery 核心函数 jQuery([sel,[context]]) jQuery(html,[ownerDoc]) jQuery(callback) jQuery.holdReady(hold)1.6+ jQuery 对象访问 each(callback) size() length selector context get...

    GridView固定表头(不用javascript只用CSS!,很好用

    ### GridView固定表头纯CSS实现方法详解 在Web开发中,尤其是在处理大量数据展示时,GridView作为常用的控件之一,其功能强大且易于使用。然而,当数据量较大时,用户在滚动页面查看数据的过程中,可能会失去对列头...

    jquery获取点击控件的绝对位置简单实例

    总之,理解`offset()`、`position()`和`offsetParent()`的区别对于在jQuery中进行精准的元素定位至关重要。在处理复杂的布局和嵌套元素时,使用这些方法的组合可以确保你获取到准确的元素位置,进而实现预期的动态...

    jquery需要的所有js文件

    "scrollLeft":"scrollTop",e=!1;if(b[d]>0)return!0;b[d]=1,e=b[d]>0,b[d]=0;return e},isOverAxis:function(a,b,c){return a>b&&a,isOver:function(b,c,d,e,f,g){return a.ui.isOverAxis(b,d,f)&&a.ui.isOverAxis(c...

    jQuery中offsetParent()方法用法实例

    本文实例讲述了jQuery中offsetParent()方法用法。分享给大家供大家参考。具体分析如下: 此方法可以返回匹配元素所有祖先元素中第一个采用定位的祖先元素。 所谓采用定位的父元素就是施加position:relative或者...

    Gridview固定表头(JS方法)

    虽然示例代码中没有直接出现 JavaScript 代码,但实际上通过 CSS 的 `top: expression(this.offsetParent.scrollTop);` 实现了表头的固定。如果需要更复杂的交互或者兼容性考虑,可以添加额外的 JavaScript 代码来...

    gridview固定表头的一个实例

    首先,我们需要设置th标签的position属性为relative,然后使用expression设置top属性为this.offsetParent.scrollTop,这样可以实现表头的固定。 在这个例子中,我们使用了两个Tab页,第一个Tab页是GridView绑定数据...

    jQuery详细教程

    jQuery详细教程,讲解很透彻, 一. jQuery 语法实例 $(this).hide() 演示 jQuery hide() 函数,隐藏当前的 HTML 元素。 $("#test").hide() 演示 jQuery hide() 函数,隐藏 id="test" 的元素。 $("p").hide() ...

    jQuery 1.5 API 中文版

    $.jQuery( selector [, context] ), .jQuery( element ), .jQuery( elementArray ), .jQuery( jQueryObject ), .jQuery( ) $.jQuery( html [, ownerDocument] ), .jQuery( html, props ) $.jQuery( fn ) jQuery ...

    offsetparent计算

    - 对于非定位元素(即 `position` 属性值为 `static`),其 `offsetParent` 可能会返回自身或最近的已定位祖先元素。 2. **offsetParent 的用途**: - 主要用于获取元素相对于哪个祖先元素进行偏移。 - 常用于...

    js实现jquery的offset()方法实例

    对于静态定位(static)的元素,offsetParent通常是最近的已定位(即position属性不是static的)祖先元素或者table相关的元素(如table, table-cell等)。这可能会影响我们计算偏移的方式。 其次,如果文档具有滚动...

    获取元素绝对位置 position

    这不包括任何滚动偏移,它是元素在页面完全加载后,不考虑CSS相对定位或绝对定位时的位置。在JavaScript中,有两个主要的方法可以用来获取这些信息:`getBoundingClientRect()`和遍历父元素的offset属性。 1. `...

    表格的头部固定效果通过css及jquery分别实现

    1.第一种方式利用css的样式来实现表格的头部固定 复制代码代码如下: <html xmlns=”http://www.w3.org/1999/xhtml”&... top:[removed]this.offsetParent.scrollTop); //这里的offsetParent是最近的有固定样式的父

    html固定表格头和列

    例如,在上面的代码中,`top: expression(this.offsetParent.scrollTop)`和`left: expression(this.parentElement.offsetParent.scrollLeft)`就是利用`expression`表达式动态计算并设置元素的`top`和`left`值,确保...

Global site tag (gtag.js) - Google Analytics