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

@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 указываю что мне надо выполнить конкретно к этой странице таким вот, судя по всему изощренным, способом.

Новые блоги и статьи Все статьи Все блоги /
Отчёт о затраченных материалах за определенный период с макетом печатной формы Maks 21.04.2026 Отчёт из решения ниже размещён в конфигурации КА2. Задача: разработка отчёта по затраченным материалам за определённый период, с возможностью вывода печатной формы отчёта с шапкой и подвалом. В. . .	Отчёт о спецтехнике находящейся в ремонте Maks 20.04.2026 Отчёт из решения ниже размещен в конфигурации КА2. Задача: отобразить спецтехнику, которая на данный момент находится в ремонте. Есть нетиповой документ "Заявка на ремонт спецтехники" который. . .	Памятка для бота и "визитка" для читателей "Semantic Universe Layer (Слой семантической вселенной)" Hrethgir 19.04.2026 Сгенерировано для краткого описания по случаю сборки и компиляции скелета серверного приложения. И пусть после этого скажут, что статьи сгенерированные AI - туфта и не интересно. И это не реклама -. . .	Запрет удаления строк ТЧ документа при определённом условии Maks 19.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "Аккумуляторы", разработанного в конфигурации КА2. У данного документа есть ТЧ, в которой в зависимости от прав доступа. . .
Модель заражения группы наркоманов alhaos 17.04.2026 Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .	Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .	Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.

@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