Как создать div наложения, используя только CSS (без Javascript)?

Я пытаюсь понять, как создать div, который накладывается на страницу, оставаясь на одном месте, когда страница прокручивается, например, как в этой статье: Топ-5 неудачных запусков компьютерных игр. (Вверху вы увидите неподвижную панель с логотипом , которую геймеры называют домом).

Я даже не уверен, что это правильная терминология - это, вероятно, не наложение:) Но что бы это ни было, похоже, что это делается только с помощью CSS, так как оно появляется, когда Javascript отключенный.

 1
css
Author: Cyclops, 2010-11-24
Source

3 answers

#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 в списке Отдельно

 3
Author: danlefree, 2010-11-24 01:13:25

Небольшое предупреждение. Если по какой-то причине (я надеюсь, что IE6 полностью устареет) у вас есть реальная потребность в поддержке IE6, этот браузер не поддерживает позицию: исправлено. Возможно, вам захочется использовать взлом свойства css "_", чтобы просто сделать его абсолютным (_position:absolute;) для случая IE6. Некоторые другие настройки свойств могут потребоваться, чтобы выглядеть аналогично версиям, отличным от IE6, и вести себя так, чтобы, по крайней мере, было нормально.

 1
Author: S.gfx, 2010-11-25 10:18:08

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

Джастин

 0
Author: justinh, 2014-04-27 07:27:44