CSS Relative Position/Normal Position Question_问答_开发者

CSS Relative Position/Normal Position Question

开发者 https://www.devze.com 2023-03-06 14:44 出处：网络

According to w3schools, the relative position value is defined as follows. relative -开发者_JS百科 The element is positioned relative to its normal position, so \"left:20\" adds 20 pixels to the elem

According to w3schools, the relative position value is defined as follows.

relative -开发者_JS百科 The element is positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position.

I know that I can get the DOM object of whatever I positioned relatively and using that, I can get the left or top position w/ respect to the origin.

My question is, how can I get the "normal" position?

Thanks,

Maybe, I misunderstand your question, but wouldn't this just be simple subtraction of the relative offset?

"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>

to normal position just set position value to: static