Css Relative Position/normal Position Question
According to w3schools, the relative position value is defined as follows. relative - The element is positioned relative to its normal position, so 'left:20' adds 20 pixels to the
Solution 1:
Maybe, I misunderstand your question, but wouldn't this just be simple subtraction of the relative offset?
Solution 2:
"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><styletype="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><scripttype="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><divid="container"><divid="item"></div></div></body></html>
Post a Comment for "Css Relative Position/normal Position Question"