- 浏览: 2168490 次
- 性别:
- 来自: 合肥
-
文章分类
- 全部博客 (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 1956CSS link、@import共同点:都是为了加载CSS文件 ... -
IE兼容模式及客户端兼容模式、服务器端兼容模式设置
2012-08-20 16:24 12864IE兼容模式: 为了帮助 ... -
IE 条件注释(转)
2012-08-20 14:20 951一、条件注释简介 IE中的条件注释(Conditional ... -
Css样式覆盖顺序
2012-08-13 16:34 52381,css样式选择器的优先级为:“元素上的style” &g ... -
css属性 :after :before content css伪元素
2012-08-01 15:47 2129:after:伪元素在元素之后添加内容。 这个伪元素允许创作人 ... -
CSS3 圆角属性border-radius、边框阴影属性box-shadow、文字阴影text-shadow、文本裁剪省略text-overflow
2012-07-31 15:37 10236相关CSS圆角属性: border-radius:CSS3标准 ... -
onblur后下一个获取焦点的控件判断、html当前活跃控件、jquery版本查看、jquery查看浏览器版本、setTimeout&setInterval
2012-07-13 15:20 7298需求: input控件在失去 ... -
html中label宽度设置、非替换元素和替换元素
2012-07-05 09:02 12336<label style="float:l ... -
css属性 background
2012-06-21 14:12 939参考:http://www.w3school.com.cn/c ... -
css属性 list-style 纵向菜单、横向菜单
2012-06-20 09:49 6704参考:ul li css 做横向菜 ... -
css属性 text-decoration outline clear overflow text-indent
2012-06-20 09:02 1189参考:http://www.w3school.co ... -
pageX, pageY, screenX, screenY, clientX, clientY
2012-06-18 11:03 1551pageX, pageY, screenX, screenY, ... -
css position, display, float 内联元素、块级元素
2012-06-18 10:16 5899参考:jQuery offset,positi ... -
jquery Fixture 插件
2012-06-07 10:16 1533jQuery.Fixture插件是一个包含在javascrip ... -
使用ajax和history.pushState无刷新改变页面URL onpopstate(转)
2012-04-10 13:20 11580var htmlData1 = $.ajax( ... -
jquery-validation-1.9.0
2012-04-07 15:52 4334jQuery验证插件: 简单高 ... -
HTTP Chunk分块&java.io.IOException: CRLF&missing CR
2012-03-22 10:29 14340总结: HTTP 1.1时,Respons ... -
Fiddler常用操作&设置
2012-03-21 14:07 24261Fiddler是一个Web调试代理 ... -
UrlEncoder,UrlDecoder, 字符集对Encoder的影响
2012-03-02 16:21 4740字符集对Encoder的影响,其实就是字符在不同字符集下编码不 ... -
HTTP Cookie构成及特殊属性
2012-02-08 15:44 1567Set-Cookie: name=value; [expire ...
相关推荐
例如,使用jQuery的`position()`和`offset()`方法可以更方便地获取元素的位置,同时考虑了各种浏览器的兼容性问题。 总的来说,理解和掌握JavaScript中关于元素位置和大小的属性,以及它们在不同浏览器中的行为,...
vue.js vue.min.js vue-router.js vue-router.min.js
内容概要:本文档是关于DM8数据库系统的SQL语言使用手册,全面介绍了其SQL语言的基础特性、功能、语法规则及相关使用方法。手册首先概述了DM_SQL的特点和它支持的各种数据类型(例如:数值、字符串、日期时间类型等)及其对应的表达式。接下来深入探讨了一系列高级话题,涵盖数据定义语句-DDL、数据操纵语句-DML和数据控制语句,具体讲解了多种表类型(常规表、HUGE表、外部表)的创建与管理,以及索引机制(全文索引、位图连接索引等)。此外还提供了丰富的实例示范,确保读者能直观理解并应用于实际项目。同时,文档也阐述了各种系统级别的功能,如日志和检查点管理、MPP管理和统计信息生成等功能的使用方法。 适合人群:具有一定数据库基础知识并且有意深入了解DM8数据库系统特性的开发工程师、数据库管理人员或相关专业技术人员。 使用场景及目标:①指导开发人员掌握DM8中各类SQL命令的实际运用技巧;②帮助运维人员学会通过SQL来进行有效的数据维护与优化,从而提升数据库的整体性能。 其他说明:该手册不仅仅是SQL理论的讲述,而是通过大量的实例演示让使用者更加熟悉日常的工作任务。对于复杂的企业级应用场景尤其有
1108_ba_open_report
anslow_02_0109
opencv下载安装教程
aronson_01_0707
Wang Chi, Szeto Donald - Designing Deep Learning Systems. A software engineer's guide
使用Python语言对Django框架进行设计,选用豆瓣读书网站(https://book.douba n.com/)作为研究对象,基于用户的阅读行为数据,运用网络爬虫技术来抓取所需数据,随后对这些数据进行深度清理,存储到数据库中。借助ECharts的可视化工具,深入分析和直观展示,实现数据分析与可视化。
barbieri_01_0108
brown_3ck_01_0718
关键词:学生选课系统;Python语言;MySQL数据库 学生选课系统采用B/S架构,数据库是MySQL。网站的搭建与开发采用了先进的Python进行编写,使用了Django框架。该系统从三个对象:由管理员和学生、教师来对系统进行设计构建。主要功能包括:个人信息修改,对学生、教师信息、课程信息、课程分类、选择课程、班级、成绩通知、教室信息、系统管理等功能
ganga_02_0909
毕设-springboot大学生竞赛管理系统(免费领取)
agenda_3cd_01_0716
Swift语言教程:从入门到实践 Swift是苹果公司开发的一种多范式编程语言,用于iOS、macOS、watchOS和tvOS应用开发。它结合了C和Objective-C的优点,同时提供了现代编程语言的许多特性,如安全性、速度以及表达力。以下是从入门到实践的Swift语言教程。 一、Swift基础 1. Swift环境设置 Xcode安装:下载并安装最新版本的Xcode,这是开发Swift应用的集成开发环境(IDE)。 创建项目:在Xcode中创建一个新的Swift项目,了解项目结构。 2. 基本语法 变量与常量:使用var声明变量,使用let声明常量。 数据类型:整数(Int)、浮点数(DoubleFloat)、字符串(String)、布尔值(Bool)等。 类型安全:Swift是强类型语言,每个变量和常量在声明时都需要指定类型(尽管Swift也能自动推断类型)。 运算符:算术运算符、比较运算符、逻辑运算符等。 3. 控制流 条件语句:if、else if、else。 循环语句:for循环、while循环、repeat-while循环。 控制转移语句:break、continue
【宝城期货-2025研报】钢材、铁矿石日报:关税扰动不断,钢矿弱势运行.pdf
anslow_05_0110
介绍了清理C盘空间的多种方法,包括使用系统工具、清理临时文件、卸载残留文件、移动用户文件夹、清理系统日志和虚拟内存等,旨在帮助用户有效释放C盘空间,提升电脑性能。
内容概要:本文档详细介绍达梦DM8分布计算集群(DMDPC)的设计理念、系统架构、关键技术及其实现。涵盖了系统原理、系统特性、关键技术、构建和配置步骤等内容。文档还提供了对计划生成、子任务划分、执行调度及链路通讯等机制的深入解析,确保使用者理解如何部署、管理和优化这个新型分布式数据库解决方案。 适合人群:本文档适用于熟悉数据库技术尤其是分布式数据库的专业人士,主要包括开发工程师、测试工程师、技术支持工程师、数据库管理员及相关管理人员。 使用场景及目标:①理解并掌握 DM8 分布计算集群的基本概念和技术原理;②指导如何正确配置、部署以及日常维护DM8分布式集群;③为解决复杂的大型企业级应用程序对高性能和高可靠的数据库需求提供技术支持。 其他说明:文档不仅讲述了技术层面的知识,还有详细的实例示范,便于用户根据自己的情况进行操作,有助于加快项目的实施进度。此外,文档还包括了丰富的配置参数和性能调优方面的内容,为优化系统性能提供了有价值的参考资料。