DIV с фиксирана позиция

В този пример ще демонстрирам как с помощта на CSS и прозрачни PNG изображения, да се постигне ефект на избледняване в долната и горната част на уеб страницата или на даден блоков елемент от нея. За постигането на желания ефект се използват DIV елементи с фиксирана позиция (position: fixed;) спрямо рамката на браузъра или на елемента, в които са вложени . На фиксираните DIV-вове, като фон(background) се задават PNG файлове с градиент – в случая от бяло(#FFF) към празрачно(transparent).

Основен минус е факта, че ако има хипервръзки в текста и те са в зоната на елемента с фиксирана позиция, тогава линковете не са активни.

Оригиналният пример е взет от CSS-Tricks. При него проблем беше, че не работи под IE6. Причината е в неправилното изобразяване на position:fixed от страна на браузъра, а също и това, че не поддържа 24 каналната прозрачност на PNG формата. Решението на проблема е използването на допълнителни стилове само за IE6, които да са в отделен CSS файл или в самия HTML документ, като за прилагането им се използва проверка за версията и типа на браузъра.

За отстраняване на проблема с position: fixed; се използва position:absolute и на обграждащия елемент се задават стойности height:100%; и overflow: auto;.

За прозрачността на PNG изображението се прибягва до употребата на филтърът AlphaImageLoader, който е един от най-използваните за фиксиране на този бъг.

Настоящият пример е тестван и работи в следните версии на най-популярните уеб браузъри:

  • Mozilla Firefox 2.0.0.12
  • Internet Explorer 7
  • Opera 9.23
  • Safari 3.0.4 (Windows)
  • Netscape Navigator 9.0
  • Internet Explorer 6

Mоже да видите работещ пример тук, a също и примерния код в текстови файлове съответно за HTML документа и CSS документа.

Постове от същата категория:
[catlist=10]

Вашият коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *