@AlexWebDev

Как решать такие нестандартные решения в верстке?

Тренируюсь в верстке, новичок, и столкнулся с крайне легким заданием для профессионалов, однако нестандартным для меня:5d2b57567f151151874250.png5d2b576b7d6a4473717093.png
Я про блоки, которые заезжают на другие блоки. Ребята, я не прошу решать что-то за меня, я прошу дать хотя бы подсказку или ресурс, откуда можно черпнуть информации, ведь моя задача не простой копипаст кода. От себя я придумал решение с transform: translate(), но мне почему то кажется, что есть более лучшие способы решить данную задачу. Буду вам очень благодарен.
  • Вопрос задан
  • 732 просмотра
Решения вопроса 5
tema_sun
@tema_sun
Почему бы не сделать фоновые картинки через background+no-repeat? Тогда и транслейтом двигать ничего не надо будет.
Ответ написан
vadimkot
@vadimkot Куратор тега CSS
поднять вверх
.class {
  margin-top: -Npx;
}

сместить влево
.class {
  margin-left: -Npx;
}

https://www.smashingmagazine.com/2009/07/the-defin...

Ну и position никто не отменял - absolute размещаешь относительно ближайшего не position static элемента, relative относительно собственного расположения элемента. При этом top, right, bottom, left также могут быть с отрицательными значениями.
Ответ написан
HunteR-VRX
@HunteR-VRX
frontend-разработчик
Используйте абсолютное позиционирование элементов, вне нормального их потока
Ответ написан
DcFanoiD
@DcFanoiD
Full Stack : web
Верстка блоков с наложением может быть реализована любым из предложенных выше способов. Нет единого стандарта, выбирайте тот способ, который лучше всего подходит под конретный макет. Например в вашем случае я бы выбрал фоновые изображения + абсолютное позиционирование со смещением transform.
Ответ написан
@GitJedi
Судя по пустоту месту справа если ничем оно не будет заполняться я бы использовал position relative и отрицательный left. Если будете двигать трансформом на определенном этапе можете получить проблемы с z-index. Согласен с остальными комментаторами способов много. Пробуйте который в вашей ситуации подходит больше
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы