Блог

Главная - Вопросы по программированию - пока я зависаю над основной категорией, я получаю выпадающий список подкатегорий. но он прячется за другим дивом. Как предотвратить

пока я зависаю над основной категорией, я получаю выпадающий список подкатегорий. но он прячется за другим дивом. Как предотвратить

#html #css #django

Вопрос:

пока я зависаю над основной категорией, я получаю выпадающую подкатегорию, но выпадающая подкатегория скрывается за изображением, как вы можете видеть на прикрепленном мной изображении.Итак, здесь я использую «z-индекс:1», но он не работает, поэтому, как решить эту проблему, пожалуйста, дайте мне знать

введите описание изображения здесь

  <div class="dropdownCategory">
                            <a class="dropbtnCat"
                               href="{% url 'coupons' Categories.cat_name %}">{{Categories.cat_name}}<i
                                    class="arrow-indicator fa fa-angle-right" aria-hidden="true"></i></br></a>
                            <div class="dropdown-contentCat">
                                {% for subCategories in SubCategoriesBar %}
                                {% if Categories.cat_id == subCategories.parent_id %}
                                <a href="{% url 'coupons' subCategories.cat_name %}">{{subCategories.cat_name}}</a>
                                {% endif %}
                                {% endfor %}
                            </div>
                        </div>

CSS

 .dropdown-contentCat {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgb(0 0 0 / 20%);
    z-index: 1;
    left: 101%;
    top: -2px;
    border-top: 2px solid #DB0038;
    font-size: 14px;
}

Комментарии:

1. Каково z-index содержание, охватывающее данную подкатегорию? Что произойдет, если вы сделаете z-index .dropdown-contentCat что-то сверхвысокое? Пример z-index: 50 ?

2. «.выпадающий список-contentCat» — это имя класса подкатегории . И я дал z-индекс:99, хотя он не работает

3. Это происходит, когда обе панели навигации имеют одинаковый уровень z-индекса содержимого позади. Как и слои бумаги, вы хотите, чтобы раскрывающийся список был на более высоком уровне, чем основное содержимое. Возможно, вы добавили ненужное z-index: 1; везде.

Ответ №1:

В раскрывающемся списке «Категория и подкатегория» должен быть самый высокий ряд значений z-индекса, поскольку он будет накладываться на все остальное на веб-сайте. Я буду рекомендовать использовать z-индекс как серию из 10,100,1000 и т.д.; Это поможет вам запомнить размещение и избежать ошибок. Измените значение z-индекса на 100 для .dropdown-contentCat , это может решить проблему.

Комментарии:

1. это означает, что мне нужно будет указать z-индекс для категории и подкатегории, как это «z-индекс:100»

2. Да, это отделит их от любых других значений z-индекса, которые вы, возможно, дали, попробуйте и дайте мне знать, работает ли это

3. Почему у вас есть дисплей: нет; по умолчанию вы меняете значение с помощью триггеров событий?

4. Попробуйте удалить свойство display: none; и временно отключить тег img в HTML, чтобы просмотреть подкатегорию?

Метки: ,