Как бороться с элементами которые «залазят» друг на друга?

Question

[One of Us]

Здравствуйте!

Я начинающий в плане верстке и у меня возникает страх перед элементами в дизайне, которые "Залазят" друг на друга. Я даже не знаю, как правильно выразиться. На скринах я вывел их в красный прямоугольник. Боязнь возникает скорее из-за того, что такие моменты не верстал ещё, всегда выбирал макеты с ровными границами. Но в таких ситуациях впадаю в ступор. Как лучше и как правильно их верстать? Позиционировать и давать z-index, давать отрицательный марджины, или объединять слои и вставлять полностью графикой?


Прошу дать любой совет, любые ссылки. Это меня пугает и тормозит.

Comments

[Ankhena]

Да Вы просто возьмите и сделайте 2 раза на тестовой страничке. Не сожрут же они Вас.

А так, любым из перечисленных вами способов в зависимости от дизайна и задачи.

[One of Us]

Ankhena W: Спасибо)

Answer 1

[Кемал Демирель]

С помощь относительного и абсолютного позиционирования.
Седону можно сделать через before и ему задать абсолютное позиционирование слева на 50% и отрицательный маргин на половину его ширины. И конечно привязать к верху (top:0)

Answer 2

[Sergey Semenov]

Как вариант, разучить flex-box + position в связки с z-index. Или выбрать другую grid систему. Все это, упрощает компоновки. Очень внимательно прочитать про position. Он на многое способен. Нужно соблюдать четкую архитектуру, дабы потом все не поехало. Grid система дает уверенность в адаптивности.