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

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

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	Установка Emscripten SDK (emsdk) и CMake на Windows для сборки C и C++ приложений в WebAssembly (Wasm) 8Observer8 30.01.2026 Чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. Система контроля версиями Git. . .	Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .

@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