Да, у меня есть опыт работы с CSS-in-JS и styled-components. Это подходы, при которых стили пишутся непосредственно в JavaScript-коде, что позволяет создавать компоненты с инкапсулированными стилями.
Фундаментальная причина, почему dropdown с максимальным z-index может оказаться под другим элементом — это контекст наложения (stacking context) в CSS.
Блочная модель CSS описывает, как элементы отображаются на странице как прямоугольные блоки. Она состоит из четырех зон, или слоев, которые накладываются друг на друга, начиная с содержимого:
Например, если у нас есть три блока с классами .red, .blue, .grey внутри контейнера .container, и нужно расположить их в определённом порядке или сетке, можно сделать так:
Чтобы сделать количество колонок в CSS Grid динамическим при фиксированной ширине колонок, можно использовать функцию repeat с ключевым словом auto-fit или auto-fill и фиксированной шириной колонок через minmax.