Проблема позиционирования меню в раскрывающемся меню в моем веб -приложении [закрыто] ⇐ CSS

[Anonymous]

Я испытываю проблему с позиционированием с раскрывающимся меню в моем веб -приложении. Выпачающийся список (стандартный HTML-элемент) для выбора субъекта появляется в верхнем левом углу экрана, а не под его родительским элементом на просмотре рабочего стола. Эта проблема возникает только на рабочем столе. Мобильное представление работает правильно. Это происходит только на рабочем столе (ширина экрана> 768px). Мобильная версия работает, как и ожидалось.

Код: Выделить всё

.studypazz-subject-selector-container {
position: relative;
width: 100%;
margin-bottom: var(--ai-spacing-md);
z-index: 10;
}

.studypazz-subject-selector {
width: 100%;
padding: var(--ai-spacing-md);
border: 1px solid var(--ai-gray-300);
border-radius: 8px;
font-size: 16px;
background: white;
appearance: none;
-webkit-appearance: none;
background-image: url('data:image/svg+xml;utf8,
');
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 16px;
position: relative;
z-index: 5;
}

/* Desktop styles */
@media (min-width: 769px) {
.studypazz-subject-selector-container {
position: relative;
}

.studypazz-subject-selector {
position: relative;
}
}

/* Mobile styles - working correctly */
@media (max-width: 768px) {
.studypazz-subject-selector-container {
position: static;
}
}< /code>



Select Subject:


1
2
3

Что я попробовал
Настройка значений z-индекса для контейнера и избранных элементов
. JavaScript, который может мешать позиционированию < /p>
Проблема сохраняется, несмотря на эти попытки. Поскольку он работает правильно на мобильном, но не на рабочем столе, я подозреваю, что может быть контекст укладки CSS или проблема позиционирования, характерная для настольного медиа -запроса.>

Подробнее здесь: https://stackoverflow.com/questions/797 ... pplication