HTML, CSS – запретить перемещение кнопки вверх при нажатии ⇐ CSS

[Anonymous]

Я пытаюсь создать компонент-аккордеон и столкнулся с проблемой.

Проблема в том, что элемент .accordion_button перемещается вверх после щелчка по нему. Я хочу, чтобы оно оставалось на том же месте.

Как это исправить? Я пытался удалить отступы элемента .accordion_button и несколько раз менял тип отображения, но это все равно не работает.

:root{ --checked_color: #d3d3d3; } *{ маржа: 0; заполнение: 0; размер коробки: граница-коробка; } html{ размер шрифта: 16 пикселей; } тело{ семейство шрифтов: «Робото», без засечек; высота: 100вх; дисплей: гибкий; оправдание-содержание: центр; выровнять-элементы: по центру; } .контейнер{ ширина: 400 пикселей; } ввод[тип="флажок"]{ дисплей: нет; } .accordion_button{ текст-выравнивание: выровнять; выравнивание текста: по центру; ширина: 100%; положение: относительное; курсор: указатель; отображение: встроенный блок; отступ: 1em 4em; цвет фона: #3e3ec3; граница-радиус: 12 пикселей 12 пикселей 0 0; цвет: #fff; } .accordion_button > svg{ позиция: абсолютная; справа: 5 пикселей; цвет: #fff; высота: 20 пикселей; переход: легкость трансформации .5s; } input[type="checkbox"]:проверено + .accordion_button > svg{ преобразование: поворот (90 градусов); ход: вар (--checked_color); } input[type="checkbox"]:проверено + .accordion_button{ цвет: вар (--checked_color); } .accordion_content{ дисплей: нет; } .accordion_content > h1{ выравнивание текста: по центру; размер шрифта: 1rem; отступ: .2em; } input[type="checkbox"]:checked ~ .accordion_content{ дисплей: блок; граница-радиус: 0 0 12 пикселей 12 пикселей; } .accordion_button,.accordion_content { box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0,335); Документ ПУНКТ 1