#javascript #css #dom
#javascript #css #dom
Вопрос:
Согласно w3schools, значение относительного положения определяется следующим образом.
относительный — элемент позиционируется относительно его нормального положения, поэтому «left: 20» добавляет 20 пикселей к ЛЕВОМУ положению элемента.
Я знаю, что могу получить объект DOM из любого, относительно которого я позиционировал, и, используя это, я могу получить левую или верхнюю позицию относительно источника.
Мой вопрос в том, как я могу получить «нормальное» положение?
Спасибо,
mj
Ответ №1:
Возможно, я неправильно понял ваш вопрос, но разве это не было бы простым вычитанием относительного смещения?
Комментарии:
1. Относительное смещение может быть примерно таким: слева: -20 сверху: 100. Вычесть это из чего?
2. Найдите положение с помощью JS — возможно, это поможет quirksmode.org/js/findpos.html
Ответ №2:
«нормальное» положение — это то, где элемент будет располагаться с 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>
Комментарии:
1. Требуется ли для выполнения этой работы div контейнера или вы можете обойтись одним div «item»?
2. Контейнер предназначен только для демонстрации.
Ответ №3:
для нормального положения просто установите значение position равным: static
position:static