Как наложить блоки друг на друга?

Question

[sinefighter]

Здравствуйте, стоит задача сделать блоки, которые налезают друг на друга. Надо так, как на скрине ниже


Если делать отрицательные margin-left или margin-right, то они налезают друг на друга, но не в той последовательности


можно было бы использовать z-index для каждого блока, но это не подходит, т.к. таких блоков много, и для каждого прописывать z-index не вариант.

Comments

[Сергей Сергей]

выводить их в обратном порядке и равнять справа налево.

[sinefighter]

можно, но это уже крайний случай, хотелось бы по порядку и без таких костылей

[Andrew]

Это называется "overlapping tabs". Решений много в гугле.

[Сергей Сергей]

может, в качестве полей для перекрытия использовать псевдо-элементы с z-index, но эти поля не заполнить потом содержимым блока.

Answer 1

[Vladislav Dragalev]

Попробуйте так: codepen.io/anon/pen/epYzya

Comments

[sinefighter]

Спасибо за решение, но у меня в данном случае в качестве фона стоит картинка (в силу особенностей дизайна), так что вариант с after не подойдет

[sinefighter]

хотя можно нарезать картинку и сделать так же через after

[Vladislav Dragalev]

sinefighter: а какого формата фоновые изображения? Повторяющиеся текстуры?

[sinefighter]

сделал таким способом, спасибо большое за наводящую мысль
https://jsfiddle.net/qkLgx7pa/1/

Answer 2

[Евгений Конкин]

Можно просто указать для каждого свой z-index какой слой над каким

Answer 3

[Денис Бочков]

"можно было бы использовать z-index для каждого блока, но это не подходит, т.к. таких блоков много, и для каждого прописывать z-index не вариант."

Для таких случаев прекрасно подходят циклы в scss, например.