через z-index вряд ли получится. тебе нужно довести форму до нижнего края конверта и там остановить. а потом уменьшать height до нуля. как будто форма пропадает в письме.
не знаю зачем другие стили кроме height, но именно height: 100%; для body, не будет работать если не сделать это и для html. к примеру когда юзаешь flexbox для всего документа. когда нужно прижать footer к примеру.
p.s. к примеру вот. если уберешь стиль у html - footer не будет прижиматься https://jsfiddle.net/6odvshgu/
если хочешь просто background менять, то не нужно тебе для этого еще и класс вешать и js вообще тут не нужен. просто проследи где у бутсрапа класс active или open добавляется и по классу в css вешай этот бэкграунд.
идешь на https://tech.yandex.ru/share/ выбираешь "счетчики" - дальше после выкачивания нужных - будет спрайт с иконками. ну и стили тоже свои можешь делать. в общем заменить будет не проблема
это нужно в одном случае - когда тебе нужно перебить какой то стиль. тобишь среди вариантов:
1) написать путь длинне вставив еще одного родителя
2) использовать !important
3) обращаться через id
4) использовать div.class-name
последний вариант самый профитный и безобидный. в других случая такое написание юзать не нужно. и смысла в этом нет.
