Как это исправить? Как сделать, чтобы не зависимо от масштаба объекты были на одном месте?
Меня кстати уже давно этот вопрос интересует. Видел на многих сайтах, когда меняешь масштаб, то объекты не меняют своё местоположение
ImperatorGreasy дорогой пользователь, настоятельно рекомендуем еще раз обратить самое пристальное внимание на п. 3.1 регламента работы сервиса (и, в особенности, на его последний абзац).
В противном случае ваши вопросы будут удаляться по причине тег-спама, а систематические нарушения приведут к блокировке учетной записи.
ImperatorGreasy, больше похоже, что вы этот код откуда-то скопировали. Советую хотя бы начать что-то писать, самостоятельно, иначе понимание HTML и CSS не придет.
ImperatorGreasy, я бы на вашем месте изменил сам подход к верстке. Про ID я уже написал. Прочите про flexbox и попробуйте отпозиционировать те же самые блоки на нем.
ImperatorGreasy, статей в интернете очень много. Наверное разницы особой нет.
Если хотите сразу и быстро понять основы на практике, то хочу порекомендовать вот этот тренажер: https://dmitrylavrik.ru/training/process/flexbox-grid
Еще очень хотелось бы порекомендовать курсы по flexbox и smartgrid от создателя этого тренажера Дмитрия Лаврика. Они есть на торрентах. Там очень много разных трюков на флексах он демонстрирует, о которых вы просто так не прочтете нигде, и сразу к примесям и препроцессорам приучает. Под IE научитесь флексы слегка адаптировать.
ImperatorGreasy, там две версии курсов: за 2017 года и 2019 г. Последняя имеет слегка другое более общее название, но все о том же, только полезной информации больше.
Такое проще оборачивать в bootstrap 4, если верстаете без бутстрапа, то проще делать при помощи flex, вы скорее всего задали фиксированную ширину блокам, которые ко всему прочему не имеют контейнера-родителя который должен иметь фиксированную ширину, условно 1140px с усредненным margin: 0 auto
ImperatorGreasy, всё из-за position: absolute, абсолют вообще для таких вещей не надо использовать, вот положил эти три блока в общий контейнер (div class="wrap"), и в нем просто отцентровал чуток
ImperatorGreasy, вообще не указывать, по умолчанию relative, то есть элемент будет вести себя так "как и всё остальное", то есть тупо рисоваться на странице слева направо, сверху вниз
если absolute, то вручную задаешь координаты элементу, это конечно может быть нужно, если что то надо РЕАЛЬНО разместить где-то на экране (эффект какой нибудь, итд), но карточки типа таких должны быть просто в отдельно контейнере и подчиняться правилам размещения в контейнере (как я выставил display:flex; justify-content: , чтобы их выравнять)
Есть замечательная вещь в том же хроме встроенный DevTool, там выбираете
выбираете в окне браузера Responsive, далее вы можете списать в поля рядом любые ширину и высоту
