Позиционирование элемента не зависимо от разметки
Нужно для букмарклета.
При клике на букмарклет в body создается элемент в шапке и вся разметка (независимо от указанных стилей) сдвигается вниз на высоту этого элемента.. Сам я пришел к выводу - невозможно. Но может я ошибаюсь? |
<button style="position: absolute; left: 0px; top: 0px">click</button>
<script>
document.body.children[0].onclick = function () {
document.body.style.cssText = 'position: absolute; left: 20px; top: 20px;';
document.body.insertAdjacentHTML('afterBegin', '<button style="position: fixed; left: 0px; top: 0px">button</button>');
}
</script>
|
bes,
да, а если в body есть элемент с position fixed?
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
window.onload = function () {
document.getElementById("dg").onclick = function () {
document.body.style.cssText = "position: absolute; top: 20px;";
document.body.insertAdjacentHTML('afterBegin', '<div style="position: fixed; left: 0; right: 0; top: 0; height: 20px; background-color: #000; width: 98%; margin: auto; z-index: 9999999;"></div>');
};
};
</script>
</head>
<body>
<div style="position: fixed; width: 35px; height: 35px; top: 0; right: 0; left: 0; margin: auto; background-color: #f00;"></div>
<a id="dg" href="#">блок для букмарклета</a>
</body>
</html>
|
тут наверное остаётся только делать выборку всех этих элементов и менять их позицию
|
bes,
это может создать слишком большую нагрузку (ведь надо искать по всему DOM), но даже не в этом проблема. Когда мы изменяет стили у body, его дочерние элементы могут тоже откреагировать и вообще поломать всю верстку
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
window.onload = function () {
document.getElementById("dg").onclick = function () {
document.body.style.cssText = "position: absolute; top: 20px; width:98%";
document.body.insertAdjacentHTML('afterBegin', '<div style="position: fixed; left: 0; right: 0; top: 0; height: 20px; background-color: #000; width: 98%; margin: auto; z-index: 9999999;"></div>');
};
};
</script>
</head>
<body>
<div style="position: absolute; width: 35px; height: 35px; top: 0; right: 0; left: 0; margin: auto; background-color: #f00;"></div>
<a id="dg" href="#">блок для букмарклета</a>
</body>
</html>
|
body схлопывается на содержимом, надо добавить ему width: 98%
|
bes,
ага, не учел |
| Часовой пояс GMT +3, время: 01:06. |