Относительная позиция CSS/нормальная позиция Вопрос

Согласно w3schools, относительное значение позиции определяется следующим образом.Относительная позиция CSS/нормальная позиция Вопрос

relative - Элемент расположен относительно его нормального положения, поэтому «left: 20» добавляет 20 пикселей в положение LEFT элемента.

Я знаю, что могу получить объект DOM независимо от того, что я позиционировал относительно и используя это, я могу получить левую или верхнюю позицию с уважением к происхождению.

Мой вопрос: как я могу получить «нормальную» позицию?

Спасибо,

источник

2011-05-18 mj_

Может быть, я неправильно ваш вопрос, но не это просто быть простым вычитанием относительного смещения?

источник

2011-05-18 13:46:35

относительное смещение может быть что-то подобный левый: -20 верх: 100. Вычесть это из чего? –

Найти позицию с помощью JS - возможно, это поможет http://www.quirksmode.org/js/findpos.html – AllisonC

«нормальное» положение, в котором элемент будет располагаться с 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>

источник

2011-05-18 13:57:09

Является ли контейнер div необходимым для выполнения этой работы или вы можете уйти с помощью только одного «элемента» div? –

Контейнер предназначен только для демонстрации. –

в нормальное положение просто установите значение позиции на: static

position:static

источник

2013-11-17 01:34:20 IRvanFauziE

Относительная позиция CSS/нормальная позиция Вопрос

ответ

Смежные вопросы