- 浏览: 2158884 次
- 性别:
- 来自: 合肥
文章分类
- 全部博客 (401)
- Agile (16)
- Apache Commons (3)
- Architecture (8)
- DB.MongoDB (5)
- DB.Mysql (3)
- DB.Oracle (34)
- DirectoryService (1)
- DotNet (1)
- English (3)
- Groovy (0)
- Html (28)
- Java (67)
- Java.Aixs (7)
- Java.Cache (2)
- Java.jPBM (1)
- Java.Resin (6)
- Java.Spring (4)
- Java.Struts2 (5)
- Java.Tomcat (16)
- Javascript (45)
- Javascript.Google Map (2)
- Javascript.Jquery (8)
- Life (15)
- Maven&Ant (4)
- Network (5)
- OS.Linux (45)
- OS.Windows (10)
- OS.Windows.Office (1)
- PlayFramework (15)
- Python (28)
- Reading notes (11)
- Security (13)
- Server.Apache (3)
- Server.Nginx (7)
- Test (6)
- Tool (15)
- Work.Solution (15)
- Other (20)
- SSO&CAS&Identity (13)
最新评论
-
hutuxiansheng123:
防火墙、Iptables、netfilter/iptables、NAT 概述 -
dacoolbaby:
非常棒的正则表达式,非常适用。万分感谢。
用python分析nginx的access日志 -
loot00:
您好! 我也遇到了相同的错误信息。我是用f_link_lob ...
LOB variable no longer valid after subsequent fetch -
feihangchen:
@OnApplicationStop public clas ...
Play framework 1.2.3 Jobs定时任务、异步任务、引导任务、触发任务、关闭任务 -
洞渊龙王:
谢谢了
www.w3.org被qiang导致logback报错:Connect reset
jQuery offset,position,offsetParent,scrollLeft,scrollTop html控件定位 css position属
- 博客分类:
- Html
- Javascript.Jquery
定位应用:点击一个按钮,然后在按钮的右边弹出一个提示框
1,提示框相对于屏幕进行定位,那么使用offset来取得当前按钮相对于body的top和left,然后通过$('body').prepend(tipContent);把提示控件加到body下
注意tipContent采用absolute定位,并设置top,left的值,当把tipContent加到body的最前面时,由于tipContent前面没有任何东西,因此它就是以body为基准根据top,left的值进行定位
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距离都是可以简单地通过+-进行平移操作!
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:
参考http://js8.in/602.html中的结论:
使用position()方法时事实上是把该元素当绝对定位来处理,获取的是该元素相当于最近的一个拥有绝对或者相对定位的父元素的偏移位置
使用position()方法时如果其所有的父元素都为默认定位(static)方式,则其处理方式和offset()一样,是当前窗口的相对偏移
使用offset()方法不管该元素如何定位,也不管其父元素如何定位,都是获取的该元素相对于当前视口的偏移
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()方法不管该元素如何定位,也不管其父元素如何定位,都是获取的该元素相对于当前视口的偏移
发表评论
-
CSS link、@import、media type、media query
2012-08-22 10:42 1927CSS link、@import共同点:都是为了加载CSS文件 ... -
IE兼容模式及客户端兼容模式、服务器端兼容模式设置
2012-08-20 16:24 12847IE兼容模式: 为了帮助 ... -
IE 条件注释(转)
2012-08-20 14:20 935一、条件注释简介 IE中的条件注释(Conditional ... -
Css样式覆盖顺序
2012-08-13 16:34 52201,css样式选择器的优先级为:“元素上的style” &g ... -
css属性 :after :before content css伪元素
2012-08-01 15:47 2110:after:伪元素在元素之后添加内容。 这个伪元素允许创作人 ... -
CSS3 圆角属性border-radius、边框阴影属性box-shadow、文字阴影text-shadow、文本裁剪省略text-overflow
2012-07-31 15:37 10219相关CSS圆角属性: border-radius:CSS3标准 ... -
onblur后下一个获取焦点的控件判断、html当前活跃控件、jquery版本查看、jquery查看浏览器版本、setTimeout&setInterval
2012-07-13 15:20 7276需求: input控件在失去 ... -
html中label宽度设置、非替换元素和替换元素
2012-07-05 09:02 12308<label style="float:l ... -
css属性 background
2012-06-21 14:12 919参考:http://www.w3school.com.cn/c ... -
css属性 list-style 纵向菜单、横向菜单
2012-06-20 09:49 6674参考:ul li css 做横向菜 ... -
css属性 text-decoration outline clear overflow text-indent
2012-06-20 09:02 1162参考:http://www.w3school.co ... -
pageX, pageY, screenX, screenY, clientX, clientY
2012-06-18 11:03 1530pageX, pageY, screenX, screenY, ... -
css position, display, float 内联元素、块级元素
2012-06-18 10:16 5866参考:jQuery offset,positi ... -
jquery Fixture 插件
2012-06-07 10:16 1506jQuery.Fixture插件是一个包含在javascrip ... -
使用ajax和history.pushState无刷新改变页面URL onpopstate(转)
2012-04-10 13:20 11555var htmlData1 = $.ajax( ... -
jquery-validation-1.9.0
2012-04-07 15:52 4308jQuery验证插件: 简单高 ... -
HTTP Chunk分块&java.io.IOException: CRLF&missing CR
2012-03-22 10:29 14302总结: HTTP 1.1时,Respons ... -
Fiddler常用操作&设置
2012-03-21 14:07 24232Fiddler是一个Web调试代理 ... -
UrlEncoder,UrlDecoder, 字符集对Encoder的影响
2012-03-02 16:21 4722字符集对Encoder的影响,其实就是字符在不同字符集下编码不 ... -
HTTP Cookie构成及特殊属性
2012-02-08 15:44 1550Set-Cookie: name=value; [expire ...
相关推荐
`position()`函数返回元素相对于其最近的定位祖先(或`offsetParent`)的偏移量。 为了保存坐标,我们需要一个持久化存储机制。在这个项目中,使用XML文件来存储坐标数据可能是一种选择。XML是一种结构化的数据格式...
为解决这一问题,可以采用CSS的定位属性,特别是`position`、`top`和`left`等属性,来使表头或某一列始终保持在可视区域内,即使页面滚动也依然可见。 ### CSS样式详解 #### 1. FixedTitleRow 类 此类应用于表头...
`offsetParent` 返回当前元素的offsetParent元素,即最近的具有定位属性(position为relative、absolute或fixed)的祖先元素。如果当前元素没有这样的祖先元素,则`offsetParent`返回`null`。 #### 6. `scrollLeft`...
先看看这两个方法的定义。 offset(): 获取匹配元素在当前视口的相对... 先来看看在jquery框架源码里面,是怎么获得position()的: 代码如下: // Get *real* offsetParent var offsetParent = this.offsetParent(), /
- **返回值用法**:此方法与`.offset()`类似,但是`.position()`获取的是相对于最近的已定位父元素的偏移量,如果元素的父级元素都是默认的`static`定位,则相当于`.offset()`。 示例代码: ```javascript var ...
JQuery开发手册 jQuery 核心函数 jQuery([sel,[context]]) jQuery(html,[ownerDoc]) jQuery(callback) jQuery.holdReady(hold)1.6+ jQuery 对象访问 each(callback) size() length selector context get...
### GridView固定表头纯CSS实现方法详解 在Web开发中,尤其是在处理大量数据展示时,GridView作为常用的控件之一,其功能强大且易于使用。然而,当数据量较大时,用户在滚动页面查看数据的过程中,可能会失去对列头...
总之,理解`offset()`、`position()`和`offsetParent()`的区别对于在jQuery中进行精准的元素定位至关重要。在处理复杂的布局和嵌套元素时,使用这些方法的组合可以确保你获取到准确的元素位置,进而实现预期的动态...
"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()方法用法。分享给大家供大家参考。具体分析如下: 此方法可以返回匹配元素所有祖先元素中第一个采用定位的祖先元素。 所谓采用定位的父元素就是施加position:relative或者...
虽然示例代码中没有直接出现 JavaScript 代码,但实际上通过 CSS 的 `top: expression(this.offsetParent.scrollTop);` 实现了表头的固定。如果需要更复杂的交互或者兼容性考虑,可以添加额外的 JavaScript 代码来...
首先,我们需要设置th标签的position属性为relative,然后使用expression设置top属性为this.offsetParent.scrollTop,这样可以实现表头的固定。 在这个例子中,我们使用了两个Tab页,第一个Tab页是GridView绑定数据...
jQuery详细教程,讲解很透彻, 一. jQuery 语法实例 $(this).hide() 演示 jQuery hide() 函数,隐藏当前的 HTML 元素。 $("#test").hide() 演示 jQuery hide() 函数,隐藏 id="test" 的元素。 $("p").hide() ...
$.jQuery( selector [, context] ), .jQuery( element ), .jQuery( elementArray ), .jQuery( jQueryObject ), .jQuery( ) $.jQuery( html [, ownerDocument] ), .jQuery( html, props ) $.jQuery( fn ) jQuery ...
- 对于非定位元素(即 `position` 属性值为 `static`),其 `offsetParent` 可能会返回自身或最近的已定位祖先元素。 2. **offsetParent 的用途**: - 主要用于获取元素相对于哪个祖先元素进行偏移。 - 常用于...
对于静态定位(static)的元素,offsetParent通常是最近的已定位(即position属性不是static的)祖先元素或者table相关的元素(如table, table-cell等)。这可能会影响我们计算偏移的方式。 其次,如果文档具有滚动...
这不包括任何滚动偏移,它是元素在页面完全加载后,不考虑CSS相对定位或绝对定位时的位置。在JavaScript中,有两个主要的方法可以用来获取这些信息:`getBoundingClientRect()`和遍历父元素的offset属性。 1. `...
1.第一种方式利用css的样式来实现表格的头部固定 复制代码代码如下: <html xmlns=”http://www.w3.org/1999/xhtml”&... top:[removed]this.offsetParent.scrollTop); //这里的offsetParent是最近的有固定样式的父
例如,在上面的代码中,`top: expression(this.offsetParent.scrollTop)`和`left: expression(this.parentElement.offsetParent.scrollLeft)`就是利用`expression`表达式动态计算并设置元素的`top`和`left`值,确保...