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

CSS Relative Position/Normal Position Question

本文关键字：位置 问题 相对 CSS 常位置      更新时间：2023-09-26

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

relative - 元素相对于其正常位置定位，因此"left：20"在元素的 LEFT 位置增加 20 个像素。

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

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

谢谢

美杰

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

"

正常"位置是元素将放置left:0; top: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>

到正常位置只需将位置值设置为： static 

position:static
相关文章：