Я создаю веб-сайт в Safari, и я только что протестировал его в Firefox, и мои фиксированные элементы навигации ведут себя так, как будто они являются абсолютными.
#navigation {
display: block;
width: 100%;
height: 50px;
position: fixed;
left: 0px;
bottom: 0px;
text-align: center;
z-index: 99000;
}
Это CSS, который у меня есть для основной навигационной оболочки (это нижний nav.). В Webkit он работает отлично: то есть он придерживается нижней части окна независимо. В firefox он позиционирует себя в конце тегов, поэтому, например, на длинной странице мне придется прокручивать вниз, чтобы увидеть его. Он действует как абсолютный.
У меня также есть навигационная панель.
.slidebar {
display: block;
position: fixed;
left: -1px;
top: -1px;
width: 1px;
height: 100%;
overflow: hidden;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-o-transition: all 300ms ease;
-ms-transition: all 300ms ease;
transition: all 300ms ease;
z-index: 99998;
}
Эта боковая панель также действует так, как будто она абсолютная, то есть она правильно позиционируется на экране, но она удлиняет <body> и, таким образом, появляется горизонтальная полоса прокрутки. height: 100%; также реагирует на высоту <body>, а не высоту окна, поэтому, например, мой <header> имеет верхнее поле 20px, а слайд-панель также наблюдает за этим полем (тело имеет 0 полей). Аналогично, вместо height: 100%;, заканчивающегося в нижней части окна, он заканчивается в нижней части <body>, факторизуя нижнее поле нижнего колонтитула.
Я не могу понять для меня, почему это происходит. Проверка элементов показывает, что все свойства загружаются нормально, а в Chrome и Safari работает. Он работал вначале, и он работал в последний раз, когда я даже редактировал любую навигацию, но с тех пор он перестает работать, так как я создал другие, не относящиеся к делу части сайта.
http://www.upprise.com/demo.php - щелкните значок "Конверт", чтобы увидеть боковую панель