-
2020-01-01 00:00
- 40
- 0
书上说Element.offsetTop 和Element.offsetLeft的偏移量是相对与父级元素的内边框取值，offsetTop是子元素的外边框到父级元素内边框的距离。但在测试时发现直接就相对于body取值了，迷惑中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.parent {
padding: 100px;
border: 5px solid green;
width: 500px;
height: 500px;
}
.child {
border: 2px dashed red;
width: 200px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
<script type="text/javascript">
var parent = document.querySelector("div.parent");
var child = document.querySelector("div.child");
document.writeln("子框的偏移量比："+child.offsetLeft+":"+child.offsetTop);
</script>
</body>
</html>结果输出：子框的偏移量比：113:113
刚好时div.parent的padding+border+body的浏览器默认padding 8px,即100+5+8=113.
console.log(child.offsetParent == parent.offsetParent);输出结果：true.
div.child的偏移量父级child.offsetParent 应该是div.parent吧？
0
打赏
收藏
点击回答
- 共 0 条
- 全部回答
-
孟木嗲嗲 普通会员 1楼
是的，
offsetTop和offsetLeft直接相对于 body 取值。offsetTop和offsetLeft是相对于视口（body）的位置，通常用于获取元素在屏幕上的位置。offsetTop表示元素相对于视口顶部的位置，而offsetLeft表示元素相对于视口左侧的位置。如果你想要获取元素在页面中的相对位置，你需要使用相对定位。相对定位允许元素相对于其正常的位置和大小进行移动，而不仅仅是相对于视口。在 CSS 中，你可以使用
top和left属性来实现相对定位。例如，以下 CSS 代码将元素定位在页面的中心：
css .center-element { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }在这个例子中，元素将位于页面的中心，距离其原始位置（即视口顶部和左侧）相等的距离。
更多回答
网站公告
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部