`
desert3
  • 浏览: 2168490 次
  • 性别: 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()方法不管该元素如何定位,也不管其父元素如何定位,都是获取的该元素相对于当前视口的偏移
分享到:
评论

相关推荐

    js获取控件位置以及不同浏览器中的差别介绍

    例如,使用jQuery的`position()`和`offset()`方法可以更方便地获取元素的位置,同时考虑了各种浏览器的兼容性问题。 总的来说,理解和掌握JavaScript中关于元素位置和大小的属性,以及它们在不同浏览器中的行为,...

    vue.js v2.5.17

    vue.js vue.min.js vue-router.js vue-router.min.js

    DM8-SQL语言详解及其数据管理和查询操作指南

    内容概要:本文档是关于DM8数据库系统的SQL语言使用手册,全面介绍了其SQL语言的基础特性、功能、语法规则及相关使用方法。手册首先概述了DM_SQL的特点和它支持的各种数据类型(例如:数值、字符串、日期时间类型等)及其对应的表达式。接下来深入探讨了一系列高级话题,涵盖数据定义语句-DDL、数据操纵语句-DML和数据控制语句,具体讲解了多种表类型(常规表、HUGE表、外部表)的创建与管理,以及索引机制(全文索引、位图连接索引等)。此外还提供了丰富的实例示范,确保读者能直观理解并应用于实际项目。同时,文档也阐述了各种系统级别的功能,如日志和检查点管理、MPP管理和统计信息生成等功能的使用方法。 适合人群:具有一定数据库基础知识并且有意深入了解DM8数据库系统特性的开发工程师、数据库管理人员或相关专业技术人员。 使用场景及目标:①指导开发人员掌握DM8中各类SQL命令的实际运用技巧;②帮助运维人员学会通过SQL来进行有效的数据维护与优化,从而提升数据库的整体性能。 其他说明:该手册不仅仅是SQL理论的讲述,而是通过大量的实例演示让使用者更加熟悉日常的工作任务。对于复杂的企业级应用场景尤其有

    1108_ba_open_report.pdf

    1108_ba_open_report

    anslow_02_0109.pdf

    anslow_02_0109

    以下是OpenCV在不同操作系统下的下载与安装教程

    opencv下载安装教程

    aronson_01_0707.pdf

    aronson_01_0707

    Designing Deep Learning Systems. A software engineer's guide - 2023.pdf

    Wang Chi, Szeto Donald - Designing Deep Learning Systems. A software engineer's guide

    基于豆瓣图书网站的图书数据分析与可视化

    使用Python语言对Django框架进行设计,选用豆瓣读书网站(https://book.douba n.com/)作为研究对象,基于用户的阅读行为数据,运用网络爬虫技术来抓取所需数据,随后对这些数据进行深度清理,存储到数据库中。借助ECharts的可视化工具,深入分析和直观展示,实现数据分析与可视化。

    barbieri_01_0108.pdf

    barbieri_01_0108

    brown_3ck_01_0718.pdf

    brown_3ck_01_0718

    基于Python的Django-vue学生选课系统实现源码-说明文档-演示视频.zip

    关键词:学生选课系统;Python语言;MySQL数据库 学生选课系统采用B/S架构,数据库是MySQL。网站的搭建与开发采用了先进的Python进行编写,使用了Django框架。该系统从三个对象:由管理员和学生、教师来对系统进行设计构建。主要功能包括:个人信息修改,对学生、教师信息、课程信息、课程分类、选择课程、班级、成绩通知、教室信息、系统管理等功能

    ganga_02_0909.pdf

    ganga_02_0909

    毕设-springboot大学生竞赛管理系统(免费领取)

    毕设-springboot大学生竞赛管理系统(免费领取)

    agenda_3cd_01_0716.pdf

    agenda_3cd_01_0716

    Swift语言教程:从入门到实践 Swift是苹果公司开发的一种多范式编程语言,用于iOS、macOS、watchOS和tvOS应用开发 它结合了C和Objective-C的优点,同时提供了现代编程语

    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

    【宝城期货-2025研报】钢材、铁矿石日报:关税扰动不断,钢矿弱势运行.pdf

    anslow_05_0110.pdf

    anslow_05_0110

    c盘满了怎么清理.zip

    介绍了清理C盘空间的多种方法,包括使用系统工具、清理临时文件、卸载残留文件、移动用户文件夹、清理系统日志和虚拟内存等,旨在帮助用户有效释放C盘空间,提升电脑性能。

    达梦DM8分布式计算集群的技术架构与管理指南

    内容概要:本文档详细介绍达梦DM8分布计算集群(DMDPC)的设计理念、系统架构、关键技术及其实现。涵盖了系统原理、系统特性、关键技术、构建和配置步骤等内容。文档还提供了对计划生成、子任务划分、执行调度及链路通讯等机制的深入解析,确保使用者理解如何部署、管理和优化这个新型分布式数据库解决方案。 适合人群:本文档适用于熟悉数据库技术尤其是分布式数据库的专业人士,主要包括开发工程师、测试工程师、技术支持工程师、数据库管理员及相关管理人员。 使用场景及目标:①理解并掌握 DM8 分布计算集群的基本概念和技术原理;②指导如何正确配置、部署以及日常维护DM8分布式集群;③为解决复杂的大型企业级应用程序对高性能和高可靠的数据库需求提供技术支持。 其他说明:文档不仅讲述了技术层面的知识,还有详细的实例示范,便于用户根据自己的情况进行操作,有助于加快项目的实施进度。此外,文档还包括了丰富的配置参数和性能调优方面的内容,为优化系统性能提供了有价值的参考资料。

Global site tag (gtag.js) - Google Analytics