Положение одного элемента относительно другого

@xomedy · Регистрация: 20.02.2018

Студворк — интернет-сервис помощи студентам

Всем доброго времени суток! Столкнулся с такой проблемой: есть у меня в Body два элемента (img и div). Мой img динамически изменяет свои размеры, в зависимости какого размера окно браузера, а вот и сам вопрос: как сделать чтобы div всегда держался на расстоянии 105px от правого края img?
Размер img задаётся в CSS, если это важно))) h1, это заголовок который находится в div.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
img#MainPicture{
    position: fixed;
    top: 0px;
    left: 0px;
    margin: 0;
    height: 100%;
    width: auto;
}
h1{
    position: absolute;
    top: 105px;
    font-size: 50px;
    margin: 0;
    line-height: 1;
    white-space: pre;
    font-weight: bold;
}

Вот код как пытаюсь сделать я, но чтобы div изменил своё положение, необходимо вручную обновить страницу:

JavaScript
1
2
3
4
5
6
7
8
if (document.getElementById("EnterPage") != null) {
    let div = document.getElementById("0001");
    div.style.position = "absolute";
    div.style.top = 0 + 'px';
    div.style.left = (document.getElementById("MainPicture").offsetWidth + 105) + 'px';
    div.style.height = "auto";
    div.style.width = "auto";
}

@atanov · 20.05.2019, 09:22

Сообщение от xomedy

Размер img задаётся в CSS, если это важно)))

это самое важное. А теперь зайдите в консоль и посмотрите в вычисленное значение. Результат Вас удивит/разочарует

@xomedy · 20.05.2019, 10:43 **[ТС]**

Сообщение от atanov

это самое важное. А теперь зайдите в консоль и посмотрите в вычисленное значение. Результат Вас удивит/разочарует

В смысле? Ииииии

как это делается, я не знаю. Совсем недавно выучил CSS, HTML, JS… Ну-у как выучил, скорее ознакомился)

@atanov · 20.05.2019, 10:46

xomedy, ну тогда ещё раз прочитайте вот это: https://learn.javascript.ru/st... putedstyle, особенно про getComputedStyle.

@xomedy · 20.05.2019, 11:29 **[ТС]**

Сообщение от atanov

xomedy, ну тогда ещё раз прочитайте вот это: https://learn.javascript.ru/st... putedstyle, особенно про getComputedStyle.

Спасибо, классная ссылка! Было очень интересно и полезно к прочтению. Однако, я похоже не всё понял так как хотелось бы, исправил одну строку но оно перестало работать вообще.

JavaScript
1
2
3
4
5
6
7
8
if (document.getElementById("EnterPage") != null) {
    let div = document.getElementById("0001");
    div.style.position = "absolute";
    div.style.top = 105 + 'px';
    div.style.left = (getComputedStyle(document.getElementById("MainPicture")).width + 105) + 'px';// тут исправлено
    div.style.height = "auto";
    div.style.width = "auto";
}

@atanov · 20.05.2019, 11:57

xomedy, что хотите сказать в 1-й строке? Плохая практика давать id начинающиеся с цифры. И называть переменную названием тега тоже не есть хорошо. могут где-то непредвиденные баги повылезать. 5-я строка - заезте в консоль и посмотрите вычисленное значение элемента document.getElementById("MainPicture").

@xomedy · 20.05.2019, 12:38 **[ТС]**

Сообщение от atanov

xomedy, что хотите сказать в 1-й строке? Плохая практика давать id начинающиеся с цифры. И называть переменную названием тега тоже не есть хорошо. могут где-то непредвиденные баги повылезать. 5-я строка - заезте в консоль и посмотрите вычисленное значение элемента document.getElementById("MainPicture").

У меня есть подозрения, что js совсем не работает. (в том смысле, что не применяется)
Ну просто я где-то читал что для веб приложения лучше всего иметь один CSS и один JS ифом я проверяю открытую страницу, чтобы джс применялся для нужной страницы.
А как залезть в консоль-то? я без малейшего понятия(((

@atanov · 20.05.2019, 12:50

xomedy, в хроме ctrl+shift+I.

@xomedy · 20.05.2019, 12:54 **[ТС]**

Аааааа, так это и есть консоль

Я не знал как это называется, хотя и активно использую. Да там даже нету left, на основании чего и предположил что js не применяется

@atanov · 20.05.2019, 13:00

Сообщение от xomedy

Да там даже нету left

нужно поставить галку show-all

@xomedy · 20.05.2019, 13:02 **[ТС]**

Что-то получилось, однако, снова же он принимает новые значения только после обновления страницы.

JavaScript
1
2
3
4
5
6
7
8
if (document.getElementById("EnterPage") != null) {
    let myBlock = document.getElementById("d0001");
    myBlock.style.position = "absolute";
    myBlock.style.top = 105 + 'px';
    myBlock.style.left = (parseInt(getComputedStyle(document.getElementById("MainPicture")).width) + 105) + 'px';
    myBlock.style.height = "auto";
    myBlock.style.width = "auto";
}

Оказывается width возвращает строку а не число, поэтому надо было его преобразовать

@atanov · 20.05.2019, 13:32

xomedy, ещё раз - что подразумевается в условии в 1-й сроке?

Сообщение от xomedy

снова же он принимает новые значения только после обновления страницы

Полагаю, что по какому-то событию должно происходить изменение. По какому?

@xomedy · 20.05.2019, 13:59 **[ТС]**

Сообщение от atanov

Полагаю, что по какому-то событию должно происходить изменение. По какому?

Смотрите, я хочу сделать так, чтобы при изменении размера окна браузера, менялся размер картинки (что у меня легко получилось) И див менял своё положение по оХ в след за картинкой, таким образом, чтобы расстояние от правого края картинки и левого края дива всегда было 105px. Чтобы не приходилось постоянно обновлять самому.

@atanov · 20.05.2019, 14:06

Сообщение от xomedy

что у меня легко получилось

ну и запихните в функцию, которая срабатывает по resize'у, изменение.
Только что Вы будете делать, если 105 px не уместятся с остальным содержимым?
И вопрос остался без ответа - что вот это такое:

Сообщение от xomedy

document.getElementById("EnterPage") != null

@xomedy · 20.05.2019, 17:03 **[ТС]**

Сообщение от xomedy

document.getElementById("EnterPage") != null

Сообщение от atanov

И вопрос остался без ответа - что вот это такое:

Это такой способ определять что за страница у меня сейчас открыта. Я пока только таким образом вижу это определение, т.к. где-то читал что для всего WEB-приложения необходимо делать только один CSS и один JS.

@atanov · 20.05.2019, 17:53

xomedy, document.getElementById обращается к элементу DOM с уникальным идентификатором и как это связано с

Сообщение от xomedy

делать только один CSS и один JS.

не понятно.

@xomedy · 20.05.2019, 18:34 **[ТС]**

Сообщение от atanov

xomedy, document.getElementById обращается к элементу DOM с уникальным идентификатором и как это связано с

Сообщение от xomedy

делать только один CSS и один JS.

не понятно.

ну на каждой странице свой Body, вот на каждой странице я даю id body и потом в js указываю что мне надо выполнить конкретно к этой странице таким вот, судя по всему изощренным, способом.

Новые блоги и статьи Все статьи Все блоги /
Новый CodeBlocs. Версия 25.03 palva 04.01.2026 Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .	Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .

@atanov 640 / 481 / 172 Регистрация: 26.05.2016 Сообщений: 2,674
	20.05.2019, 10:46
	xomedy, ну тогда ещё раз прочитайте вот это: https://learn.javascript.ru/st... putedstyle, особенно про getComputedStyle. 0

@atanov 640 / 481 / 172 Регистрация: 26.05.2016 Сообщений: 2,674
	20.05.2019, 11:57
	xomedy, что хотите сказать в 1-й строке? Плохая практика давать id начинающиеся с цифры. И называть переменную названием тега тоже не есть хорошо. могут где-то непредвиденные баги повылезать. 5-я строка - заезте в консоль и посмотрите вычисленное значение элемента document.getElementById("MainPicture"). 0

@atanov 640 / 481 / 172 Регистрация: 26.05.2016 Сообщений: 2,674
	20.05.2019, 12:50
	xomedy, в хроме ctrl+shift+I. Миниатюры 0

@xomedy 1 / 2 / 0 Регистрация: 20.02.2018 Сообщений: 47
	20.05.2019, 12:54 [ТС]
	Аааааа, так это и есть консоль Я не знал как это называется, хотя и активно использую. Да там даже нету left, на основании чего и предположил что js не применяется 0