Форма MaterializeCSS, видимая через панель навигации

Question

Итак, я весело провожу тестирование MaterializeCSS для моего нового сайта. Тогда я понял.

Визуальный вид моей формы завис над моей панелью навигации. И это проблема, которую я, к сожалению, не могу исправить, и, вероятно, она имеет простое и очевидное решение ...! Но я сам слишком слеп, чтобы это увидеть. Может ли кто-нибудь помочь?

Страница контактов Саны Риноми

РЕДАКТИРОВАТЬ: Я знаю, что я дрянной в объяснении проблем, поэтому я бы, возможно, некоторые визуальные эффекты могли бы помочь.

Answer 1

Если я правильно понял проблему, это довольно простое решение. Вам не нужно удалять фиксированное положение, но вам придется компенсировать высоту панели навигации. Фиксированное положение удаляет элемент из потока, поэтому другие элементы «не видят его».

Итак, просто добавьте верхнее поле в ваш контейнер Page и присвойте ему значение высоты navbar:

.pageContainer {
  margin-top: 64px;
}

Обратите внимание, что вы должны учитывать различные размеры экрана и изменения навигационной панели.

дополнительное чтение, которое может помочь.

(фиксированный) элемент удаляется из обычного потока документов, и для элемента в макете страницы не создается пространство. MDN - CSS / позиция

РЕДАКТИРОВАТЬ (после дальнейшего разговора и уточнения я обновляю ответ): Оригинальная проблема происходит на свитке. Это потому, что форма (или весь pageContainer) имеет z-index, который выше чем nav (bar). Я добавил z-index: 2 к элементу nav непосредственно в средствах разработки на Mozilla Firefox, и это решило проблему.