Видеото като фон за уебсайт | HTML, CSS

Опитвам се да разбера как да създам div, който припокрива страницата, оставайки на едно място, когато страницата се превърта, както е използвано в тази статия: Топ 5 стартирани PC игри. (Ще видите лента отгоре, която не се движи, с логото, където геймърите се обаждат вкъщи).

Дори не съм сигурен каква е правилната терминология - вероятно не е наслагване :) Но каквото и да е, изглежда, че се прави само с CSS, както се показва, когато Javascript е деактивиран.

#status-bar { width: 100%; height: 36px; position: fixed; top: 19px; left: 0; z-index: 2147483646; -moz-box-shadow: 0px 0px 3px #8a8a8a; -webkit-box-shadow: 0px 0px 3px #8a8a8a; box-shadow: 0px 0px 3px #8a8a8a; background: transparent url('/images/Elements/status-bar/status-bar-bg.png') repeat-x; } 

Източник на страницата.

Свързано четене: CSS позициониране 101 в отделен списък

  • Благодаря, така че ключът е позиция: фиксирана. Наистина ли е необходим z-индексът или това идва от примерната страница? Също така, има ли конкретни терминология за тази техника (като наслагване или нещо подобно)?
  • z-индексът е необходим, за да се поддържа редът на подреждане. Но стойността не трябва да бъде толкова висока, достатъчно висока, за да задържи елемента на върха на другите (които обикновено имат z-индекс 1). Не знам конкретно име на тази техника.
  • Добре, можете да зададете високи z-индекси ... Но 2147483646 ?!
  • @ bjb568, който е най-високият възможен z-индекс. Вижте stackoverflow.com/questions/491052/…
  • @karancan Не е ли достатъчно 3? : P

Малка предупредителна дума. Ако по някаква причина (надявам се IE6 да бъде напълно оттеглена) имате реална нужда да поддържате IE6, този браузър не поддържа позиция: фиксирана. Може да искате да използвате "_" css хак на свойства, за да го направите абсолютна позиция (_position: absolute;) за случая на IE6. Може да са необходими някои други настройки, за да изглеждат подобни на версиите, които не са IE6, и да се държат по начин, който поне е добре да се използва.

  • Благодаря, но се занимавам само със съвременните браузъри.

CSS код

.picColor{ width:320px; height:240px; background: url(img/flower.png) no-repeat; border:5px solid #000000; } .picColor:hover { opacity:0.9; background:#FFFFFF; width:320px; height:240px; } 

Пълен източник ... CSS наслагване

Джъстин

е работил за вас: Charles Robertson | Искате ли да се свържете с нас?