当前位置：文江博客话题详情

CSS相对位置/正常位置问题

发布于 2024-11-08 01:34:01 字数 204 浏览 0 评论 0原文

根据w3schools，相对位置值定义如下。

relative - 元素相对于其正常位置定位，因此“left:20”向元素的 LEFT 位置添加 20 个像素。

我知道我可以获得相对定位的任何 DOM 对象，并使用它，我可以获得相对于原点的左侧或顶部位置。

我的问题是，我怎样才能获得“正常”位置？

谢谢，

米杰

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

合约呢 2024-11-15 01:34:01

也许，我误解了你的问题，但这难道不是简单地减去相对偏移量吗？

回复收藏 0 原文

爺獨霸怡葒院 2024-11-15 01:34:01

“正常”位置是元素使用 left:0 定位的位置；顶部：0；。你可以通过从当前位置减去偏移量来获得这个位置（在Chrome中测试）：

<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style type="text/css">
#container { width: 100px; height: 100px; margin: 100px auto; border: 1px solid red; }
#item { position: relative; top: 10px; left: 10px; width: 80px; height: 80px; border: 1px solid green; }
</style>
<script type="text/javascript">
window.onload = function () {
  var container = document.getElementById('container');
  var item = document.getElementById('item');
  var computed = window.getComputedStyle(item);
  item.innerHTML = 'Normal: (' + (item.offsetLeft - parseInt(computed.left))
    + ', ' + (item.offsetTop - parseInt(computed.top) + ')');
};
</script>
</head>
<body>
<div id="container"><div id="item"></div></div>
</body>
</html>

"normal" position is where the element will be positioned with left:0; top:0;. You can get this position by substracting the offset from the current position (tested in Chrome):

<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style type="text/css">
#container { width: 100px; height: 100px; margin: 100px auto; border: 1px solid red; }
#item { position: relative; top: 10px; left: 10px; width: 80px; height: 80px; border: 1px solid green; }
</style>
<script type="text/javascript">
window.onload = function () {
  var container = document.getElementById('container');
  var item = document.getElementById('item');
  var computed = window.getComputedStyle(item);
  item.innerHTML = 'Normal: (' + (item.offsetLeft - parseInt(computed.left))
    + ', ' + (item.offsetTop - parseInt(computed.top) + ')');
};
</script>
</head>
<body>
<div id="container"><div id="item"></div></div>
</body>
</html>

回复收藏 0 原文