HTML CSS LAYERS

Question

Я создал страницу, на которой я пытался добиться эффекта выровненной внизу панели инструментов, как в книге с одним лицом. Для этого я сделал div с наивысшим z-индексом, установил фиксированное положение и установил нижний 0 как

#bar
{
 z-index  : 11;
 position : fixed;
 bottom   : 0;
 height   : 50;
 left     : 0;
 right    : 0;
}

работает нормально, но при прокрутке кажется, что рендеринг страницы занимает много времени, как будто страница тяжелая, прокрутка плавная, но рендеринг страницы немного медленный, что дает не очень хороший эффект прокрутки. Кто-нибудь знал, что случилось ...

или ты вообще меня понял: p

Answer 1

Положение: фиксированное само по себе не должно вызывать этих проблем.

Похоже, что браузеры просто медленно отображают вашу страницу. Страница большая или сложная? Это может быть вызвано слишком сложным HTML, CSS и особенно Javascript.

Попробуйте упростить (или отключить, для JS) каждый по очереди.

(Я бы внимательно посмотрел на любые события JS или CSS, использующие селектор *).

Answer 2

Если эта нижняя строка находится внизу HTML-кода, она будет загружена (и обработана) после всего остального. Если остальная часть страницы большая (глупый код, сложные javascripts или гигантские изображения), это, вероятно, сделает все хуже, поскольку стили применяются более или менее непрерывно при загрузке страницы.

Простой способ проверить это: воссоздайте нижнюю панель на супер простой странице и посмотрите, получите ли вы тот же эффект. Если это так, ваша страница, вероятно, слишком большая или сложная.

Или ваш компьютер просто медленный: -)

Answer 3

Если у вас есть правило "background-attachment: fixed", которое также может вызывать похожие проблемы. Другая проблема, с которой вы должны быть осторожны, это то, что IE6 не поддерживает позицию: исправлено, поэтому вы должны делать это с помощью JavaScript, что также замедляет работу сайта.