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

Question

[AlexWebDev]

Тренируюсь в верстке, новичок, и столкнулся с крайне легким заданием для профессионалов, однако нестандартным для меня:
Я про блоки, которые заезжают на другие блоки. Ребята, я не прошу решать что-то за меня, я прошу дать хотя бы подсказку или ресурс, откуда можно черпнуть информации, ведь моя задача не простой копипаст кода. От себя я придумал решение с transform: translate(), но мне почему то кажется, что есть более лучшие способы решить данную задачу. Буду вам очень благодарен.

Comments

[Антон Спирин]

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

Методом проб и ошибок и изучая чужой опыт. Именно с опытом в последствии приходит понимание.

Answer 1

[tema_sun]

Почему бы не сделать фоновые картинки через background+no-repeat? Тогда и транслейтом двигать ничего не надо будет.

Answer 2

[Вадим Кот]

поднять вверх

.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 также могут быть с отрицательными значениями.

Comments

[Rustam Bainazarov]

Можно и без absolute поднять. Relative + top с отрицательным значением:

[Вадим Кот]

Рустам Байназаров, Так я собственно и написал два варианта для position с absolute и relative. Смотря относительно чего позиционировать - если контейнера, то absolute, если просто подвинуть элемент, то relative. Про negative значения в ответе моем также указано.

[Rustam Bainazarov]

Вадим Кот, я, видимо, косо читал, прошу прощения :))

Answer 3

[ReActor Дмитрий Вершанский]

Используйте абсолютное позиционирование элементов, вне нормального их потока

Answer 4

[GitJedi]

Судя по пустоту месту справа если ничем оно не будет заполняться я бы использовал position relative и отрицательный left. Если будете двигать трансформом на определенном этапе можете получить проблемы с z-index. Согласен с остальными комментаторами способов много. Пробуйте который в вашей ситуации подходит больше