CSS相對位置/正常位置問題

根據w3schools，相對位置值定義如下。CSS相對位置/正常位置問題

relative - 元素相對於其正常位置的位置，因此「left：20」將20個像素添加到元素的LEFT位置。

我知道我可以得到任何我相對定位的DOM對象，並使用它，我可以獲得左側或頂部位置w /尊重原點。

我的問題是，我怎麼能得到「正常」的位置？

感謝，

來源

2011-05-18 mj_

也許，我誤解你的問題，但不會這只是相對的簡單的減法偏移？

來源

2011-05-18 13:46:35

相對偏移可能是一些您可以通過減去從當前位置（在Chrome測試）的偏移得到這個位置像左邊：-20頂部：100。從什麼中減去？ – 2011-05-18 13:48:52

找到使用JS的位置 - 也許這將有助於http://www.quirksmode.org/js/findpos.html – AllisonC 2011-05-18 13:54:11

「正常」位置是元素將與left:0; top:0;一起定位的位置。

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

來源

2011-05-18 13:57:09

容器div是否需要使這項工作，或者你可以擺脫只有一個「項目」div？ – 2011-05-18 14:03:27

該容器僅用於演示。 – 2011-05-18 18:06:05

到正常位置，只需設置位置值：static

position:static

來源

2013-11-17 01:34:20 IRvanFauziE

CSS相對位置/正常位置問題

回答

相關問題