Блог

Главная - Вопросы по программированию - Элемент появляется поверх другого элемента в размере телефона

Элемент появляется поверх другого элемента в размере телефона

#html #css #list #input

Вопрос:

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

Это то, чем должен быть поиск, а под ним список, но когда я пытаюсь что-то написать, у меня возникает эта проблема

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

the list pops ower the search, could you tell me please how to solve this problem

Code:

     .navigation{
      position: fixed;
      left: -32rem;
      width: 40rem;
      height: 100%;
      background:linear-gradient(to top,    rgb(0, 0, 0, .9),rgb(0, 0, 0, .9));
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      transition: left .8s cubic-bezier(1, 0, 0, 1);
      z-index: 4;
    
    }
    .navigation-serch{
      position: relative;
      top: 10rem;
    }
    .navigation-list{
    list-style: none;
    padding: 0;
    height: 28rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
} 
 <nav class="navigation">
        <div class="navigation-headin">
            <form class="navigation-serch">
                <input type="text" class="navigation-search-input" placeholder="Search">
                <button name="navigation-search" class="navigation-search-btn"> 
                    <i class="fas fa-search"></i>
                </button>
            </form>
        </div>
        <ul class="navigation-list">
            <li class="navigation-item"> <a href="#" name="navigation-item " class="navigation-link">Home</a></li>
            <li class="navigation-item"> <a href="#" name="navigation-item " class="navigation-link">About us</a></li>
            <li class="navigation-item"> <a href="#" name="navigation-item " class="navigation-link">Rooms</a></li>
            <li class="navigation-item"> <a href="#" name="navigation-item " class="navigation-link">Events</a></li>
            <li class="navigation-item"> <a href="#" name="navigation-item " class="navigation-link">Contact</a></li>
        </ul>
        <div class="copy-right">
            <p>amp;copy; 2021 Sunset Lodge. All Rights Reserved.</p>
        </div>
    </nav>

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

1. Не тратя время на полноценный ответ, извините, но я могу сказать вам, что ваша проблема в том .navigation-serch { position: relative; top:10rem; } . При этом пространство, занимаемое элементом на странице, остается прежним (поскольку оно не влияет на другие элементы), оно просто будет отображаться 10 rem ниже и перекрывать содержимое в том же контексте. Но на самом деле вы хотите, чтобы он сдвинул меню вниз, поэтому я нахожу гораздо более вероятным, что вы хотите padding-top:10rem; или margin-top:10rem; вместо того, чтобы вмешиваться в позиционирование здесь.

2. @ippi, я думаю, подходит для вашей проблемы в том виде, в каком она была поставлена, но не могли бы вы также объяснить левое расположение-32rem? Если мы запустим ваш код так, как он представлен, это уберет все с экрана — и использование rem здесь я не могу понять, это какое-то исправление, чтобы иметь дело с левым боковым столбцом?

3. боковая панель имеет ширину 8 rem, а навигация-40 rem, и они -32 rem слева, чтобы скрыть навигацию, и когда пользователь нажимает на значок панели, скрытая проверка проверяется и отображается навигация .флажок: установлен ~ .навигация{ слева: 8rem; }

Метки: