Форма MaterializeCSS, видимая над навигационной панелью
Итак, я развлекаюсь, тестируя MaterializeCSS для своего нового веб-сайта. Потом я понял.
Визуальные элементы моей формы нависают над моей навигационной панелью. И это проблема, которую я, к сожалению, не могу исправить, и, вероятно, у нее есть простое и очевидное решение ...! Но я сам слишком слеп, чтобы это видеть. Может кто-нибудь помочь?
Контактная страница Саны Риноми
Обновлено: Я знаю, что плохо объясняю проблемы, поэтому я бы подумал, что, возможно, некоторые визуальные эффекты могут помочь.
Хотя да, конечно, это решит проблему, но я не хочу этого делать, так как хочу, чтобы моя навигационная панель была закреплена в верхней части экрана. Чего я не хочу, так это текста, кнопок и оформления из формы, перекрывающей панель навигации.
если вы обратите внимание, вы заметите, что ваши значки социальных сетей и «Связаться со мной» не отображаются на скролле. что-то не так только с формой
Я знаю, поэтому я сказал «визуальные эффекты формы», поскольку это как-то связано со свойствами самой формы. Вот почему я спрашиваю, знает ли кто-нибудь способ решения этой проблемы, поскольку мне нравится внешний вид формы с фреймворком MaterializeCSS.
Ответы 1
Если я правильно понял проблему, это довольно простое решение. Вам не нужно удалять фиксированное положение, но вам придется компенсировать высоту навигационной панели. Фиксированная позиция удаляет элемент из потока, поэтому другие элементы его «не видят».
Итак, в основном просто добавьте верхнее поле к контейнеру страницы и присвойте ему значение высоты навигационной панели:
.pageContainer {
margin-top: 64px;
}
Обратите внимание, что вы должны учитывать разные размеры экрана и изменения навигационной панели.
дополнительное чтение, которое может помочь.
The (fixed) element is removed from the normal document flow, and no space is created for the element in the page layout. MDN - CSS/position
РЕДАКТИРОВАТЬ (после дальнейшего разговора и уточнений обновляю ответ):
Исходная проблема возникает при прокрутке. Это потому, что форма (или весь pageContainer) имеет z-index, который выше, чем nav (bar). Я добавил z-index: 2 к элементу nav непосредственно в инструментах разработки в Mozilla Firefox, и это решило проблему.
Извините, проблема не в этом, я добавил несколько изображений, чтобы вы могли понять, в чем проблема! '^^
Я открыл страницу в трех разных браузерах и не могу воспроизвести такое поведение. Было бы очень полезно, если бы вы указали, какой браузер вы используете и с каким разрешением. Кстати, вы должны в любом случае компенсировать высоту навигатора. Сейчас это может не представлять проблемы, но, скорее всего, она появится позже.
@AmeliaAldridge ах, теперь я понимаю, что вы имеете в виду. Вы должны были сказать, что это происходит при прокрутке. Это проблема с z-индексом элемента nav. z-index: 2 работал у меня, когда он устанавливался непосредственно на элемент NAV. Попытайся.
В настоящее время я использую Firefox: Developer Edition и стандартное разрешение 1920x1080. Я видел это поведение на всех устройствах, которые я видел с открытой формой, поскольку я попросил некоторых друзей открыть его на своих устройствах (телефонах, планшетах и ноутбуках), и проблема осталась.
Мы писали одновременно. Как я уже сказал, путаница возникла из-за того, что вы не упомянули, что это происходит при прокрутке. Об этом позаботится Z-index :)
Спасибо! Хахахахаха! Я очень запутанный человек! Извините! '^^ Это определенно устранило проблему! Я знаю, что это может показаться мне дерзким, но не могли бы вы отредактировать свой тент выше для любой другой бедняги, у которой есть подобная проблема? В этой заметке я должен добавить, что компенсация для навигационной панели выполняется с помощью класса standalone, который дает компенсацию с использованием padding и vh (vh из-за разных размеров экрана на самом деле). Хахахаха!
попробуйте удалить этот код, .pinned {position: fixed! important; }