Как лучше делать слоистую структуру в HTML+CSS?

Question

[Apstrew]

Всем привет!

У меня есть какая-то нехитрая вёрстка на флексбоксах. И один из элементов - серая кнопка на скриншоте ниже - его часть. Позициониреутся, масштабируется.


Как лучше делать, если я хочу чтобы вёрстке и всей вложенной структуре дивов подчинялась не только эта серая кнопка, но и идентичная ей по размерам подложка? Можно ли добиться этого без абсолютного позиционирования? (Я тут пытаюсь сделать без лишних костылей, чтобы серая крышка отъезжала по нажатию)

Спасибо.

Comments

[alexalexes]

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

[Apstrew]

alexalexes,
Хотел как раз "физически" положить два элемента один под другой. Вообще - отъезэание по щелчку сделать могу, а вот положить друг под друга - вопрос.

Answer 1

[alexalexes]

Примерно так:

<div class="подложка">
  <div class="элемент-подложки" style="background-color: transparent; transform: translate(0, -30px)">
  </div>
</div>

Сам .элемент-подложки не будет двигаться. Будет смещаться только его графический образ.

Comments

[Apstrew]

У меня из-за translate под сдвигаемым элементом образуется пустое место, отведённое под бывшее положение этого элемента. И всем нижележащим тоже приходится транслейт прописывать. В итоге сделал с абсолютным позиционированием. Плохо.

/////////
Интересно, существуют ли надстройки над хтмлевской разметкой, которые JavaScript'ом бы управляли положением и поведением элементов? Было бы здорово в тех случаях (как в моём), когда вложенная структура это скорее ограничение, а не бонус...

А то вместо красивой структуры у меня получилось "враппер врапперов контейнеров" и, как следствие, куча закрывающих тэгов без какой бы то ни было пользы. И всё равно практически каждому элементу по своему стилю, и по своему айдишнику.