offsetTop值和position的关系

最新推荐文章于 2022-09-03 16:32:49 发布
原创 最新推荐文章于 2022-09-03 16:32:49 发布 · 639 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #javascript

本文探讨了CSS布局中offsetTop属性的作用，它用于获取元素相对于其定位父元素的顶部距离。当父元素设置为position: relative时，offsetTop的有效性。同时介绍了Element.getBoundingClientRect()方法，该方法返回元素相对于视口的几何信息，包括top、right、bottom、left等属性，是获取元素精确位置的重要工具。

offsetTop是找到元素相对于父级定位元素的距离

如果父级有position：relative

获取到的offsetTop是相对于定位了的父级元素的距离

 用Element.getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。

阿丙_zl
关注
offsettop的用法
qq_40630924的博客
02-16 1938
offsettop的用法，作用是获取一个元素到顶部的距离，做吸顶可以用offsettop获取到顶部的距离
position().top和scrollTop()和.offset()
第三世界的博客
10-13 3044
afasdfasdf       afasdfasdf       afasdfasdf       afasdfasdf       afasdfasdf       afasdfasdf       afasdfasdf       afasdfasdf       afasdfasdf       afasdfasdf       afasdfasdf       a
offsetTop
extendworld的博客
08-23 1530
定位参照点 offsetTop 的定位是相对于 offsetParent 元素的 offsetParent的定义：与当前元素最近的经过定位(position不等于static)的父级元素 类似于绝对定位的参照点。 三种情况： position为fixed时，offsetParent为null，offsettop的值和top相等。此时元素是以视口来定位的。 position非fixed，...
关于offsetLeft与position:relative，margin:auto;的一些关系
jq
01-02 2997
对于div的offsetLeft或offsetTop属性，它与postion的关系十分密切。 默认情况下是position:static;在position为static(即没有设置positoin属性，或position为空时)。 1.在ie7(ie6没有环境测试估计一样)中,div的offsetLeft的值是当前div左边框到它父级div左内边框的像素距离，对于它的父级div的po
深入理解定位父级offsetParent及偏移大小
嘿嘿
07-01 550
前面的话 　　偏移量(offset dimension)是javascript中的一个重要的概念。涉及到偏移量的主要是offsetLeft、offsetTop、offsetHeight、offsetWidth这四个属性。当然，还有一个偏移参照——定位父级offsetParent。本文将详细介绍该部分内容 定位父级 　　在理解偏移大小之前，首先要理解offsetParent。人们并没有把offsetParent翻译为偏移父级，而是翻译成定位父级，很大原因是offsetParent与定位有关 　
关于offsetTop的误解
04-22 846
一直以为offset是子元素相对于父元素的距离，后来用了才知道是一个坑，只存在于定位元素中 在做li的搜索的定位的时候，为了得到li相对于ul的距离，本来也可以用li的高度相乘，但是用了offsetTop，可是用上后发现得到的值怎么都不对，最后在控制台找到他的offsetParent竟然不是ul，跑到了另外一个元素上面, 原因，offsetTop是找到元素相对于父级定位元素的距离， ...
27.html的定位（position）和偏移量（offset）
越努力越幸运的博客
04-25 6223
文章目录定位偏移量（offset）相对定位绝对定位固定定位粘滞定位 定位 定位（position）是一种高级的布局手段，通过定位可以将元素摆放到页面的任意位置 可选值： static：默认值，元素静止，没有开启定位 relative：开启元素的相对定位 absolute：开启元素的绝对定位 fixed：开启元素的固定定位 sticky：开启元素的粘滞定位 偏移量（offset） 元素开启定位后，可以通过偏移量来设置元素的位置，偏移量有四个分别是 top：定位元素和定位位置上边的距离 bottom：定位元素和
scrollTop、offsetTop、offsetHeight等相对位置介绍
lyqhn2012的专栏
04-27 827
scrollTop 滚动条相对于其顶部的偏移 offsetTop 返回当前元素上边缘距离offsetParent元素的距离，返回值是数字，单位是像素。 offsetHeight 返回当前元素的高度，包括内边距和边框 event.clientX，event.clientY 相对于浏览器窗口的(x,,y)坐标，不包括工具栏和滚动条 event.pageX， event.pageY 相对于文档的(x,,
2021-07-31 通过offset拿到top值，第一次可以跳转到指定位置，再点一次时发现top值发生变化
qq_46691281的博客
07-31 372
let position = $("#comment_form").offset() position.top = position.top + $('#mainContent').scrollTop() $("#mainContent").animate({ scrollTop: position.top },1000) 做了一个目录效果的点击，点击后可以跳转到该部分的位置 ...
获取offsetLeft，offsetTop值不准的原因
fwx02的专栏
12-17 6335
遇坑总结： 决定offsetLeft、offsetTop的唯一因素是当前节点和offsetParent节点的偏移关系。 也就是说只与offsetParent有关，那么怎么确定一个元素的offsetParent呢？ 一个元素的offsetParent可以是以下其中之一： 具有position属性（除了static值以为，而position默认值为static）的最近父元素； 最近的table，table cell父元素； 根节点元素； 设置了动画transform:translate的最近父元素；
使用a做锚点链接时，offset().top重复点击时位置不同的问题。
swallowliyan的专栏
05-11 2264
功能 ：最近做了一个简单的功能，文章的内容导航，类似百科的右侧导航。考虑用锚点来实现，整个页面要求单屏显示。点击右侧的导航来定位左侧的内容位置。首先，想到的办法就是，通过右侧点击获取当前左侧锚点的对象，把它的offset().top，赋值给右侧的父级的srcollTop，就OK了。问题：但是问题出现了，导航在第一次点击时，内容能正常链接过去，第二次再点击时内容的位置就不正常了。每次点击锚点时，因为...
offsetleft和offsettop的使用
m0_71814235的博客
09-03 1131
offsetleft和offsettop的使用
操作元素之修改样式属性
leechoy
06-12 819
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>..
获取元素大小和位置的方式
iteval
07-20 1166
一、直接获取元素样式属性值 – element.style.width console.log(div.style.width); // 500px console.log(parseInt(div.style.width)); // 500 console.log(typeof (div.style.width)); // string 二、offset 偏移量 offsetWidth = width + padding + border offsetHeight = height + padding
css中定位position、偏移top,bottom,left,right和高宽度设置问题
xiaoxiao_xiaoliu的专栏
09-12 7570
css中 1.定位问题
JS中offsetTop、clientTop、scrollTop、offsetTop各属性介绍
热门推荐
semanwmj的专栏
12-15 2万+
这里是javascript中制作滚动代码的常用属性 页可见区域宽： document.body.clientWidth; 网页可见区域高： document.body.clientHeight; 网页可见区域宽： document.body.offsetWidth   (包括边线的宽); 网页可见区域高： document.body.offsetHeight (包括边线的宽); 网页正文
offsettop及相关属性介绍
XYLHxylh的博客
03-19 2374
offsetParent定位父级 偏移量属性一般就是offsetLeft、offsetTop、offsetHeight、offsetWidth这四种了，然后还有一个offsetParent属性作为偏移的参照点。在网上看到的offsetParent的定义是：与当前元素最近的经过定位(position不等于static)的父级元素（感觉和绝对定位的定位点很类似？）。然后具体情况分为下面几种： ...
JQuery position().top和offset().top的区别
椒盐薄荷糖
05-18 8542
Position():获取匹配元素集合中第一个元素的当前坐标。相对于偏移父元素。相对于offset parent的当前坐标值Offset():获取第一个元素的当前坐标，或者将每个元素的坐标设置为相对于文档的匹配元素集合。相对于偏移document。应用实例:点击edit，在下方添加一个编辑框，实现修改地址功能。每次都自动定位到当前正在编辑的按钮坐标。如图：代码实现：/**  * Add Addre...
CSS3过渡效果小练习-进度条
nuomi_w的博客
11-15 1578
Document
深入解析offsetTop与offsetParent属性应用
例如，当元素被隐藏（display: none）时，offsetTop和offsetParent的值在大多数现代浏览器中会返回0或null，具体行为依赖于浏览器实现。因此，在调用这些属性前应确保元素已渲染且可见。另外，表格相关元素如td、tr...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值