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

Всё это можно сделать самому, не надо быть великим гением и строить огромные схемы; нужно просто знать парочку свойств в CSS.

Расположить любой элемент в любой точке экрана можно с помощью свойства position. Оно принимает значения static (обычное), relative (передвигает элемент, при этом резервируя за собой пространство), absolute (расположение относительно документа) и fixed (относительно краёв экрана). Нам понадобятся fixed и absolute.

Напомню базовые правила оформления кодов в CSS:

Код:

путь к элементу {
  свойство: значение;
  position: absolute;
}

Основные пути к элементам для разных движков:

punBB:

phpBB2:

(на данный момент не могу привести больше примеров, т.к. рабочий тестовик занят Если очень-очень надо - киньте ссылку на ваш форум)

Для своего элемента надо будет создать виджет без использования стандартного шаблона, в начале кода добавив

Код:

<div id="overlay_1">

А в конце

Код:

</div>

Путь к вашему элементу будет равен #overlay_1. При необходимости указывайте другие номера.

Тактики размещения
Ну, приступим к делу
Всего мы рассмотрим три основные тактики:

1. Простое расположение относительно экрана;
   
2. Расположение у границы резинового форума;
   
3. Расположение в определённом месте форума с фиксированной шириной.
   

Тактика первая
Если у вас дизайн на весь экран или просто необязательно разместить блок поверх определённого элемента, то можно его прикрепить к границе экрана.
Для этого используем следующий код CSS (размещение в левом-верхнем углу):

Код:

путь к элементу {
  position: absolute;
  top: 20px; /* отступ сверху */
  left: 20px; /* отступ слева */
  z-index: 1000; /* указываем, что блок должен прорисовываться выше других элементов */
}

Надо будет ограничить размеры блока, чтобы текст и картинки не растянулись на весь экран:

Код:

путь к элементу {
  position: absolute;
  top: 20px; /* отступ сверху */
  left: 20px; /* отступ слева */
  z-index: 1000; /* указываем, что блок должен прорисовываться выше других элементов */
  width: 350px; /* ширина */
  height: 250px; /* высота */
  overflow: auto; /* если содержимое уйдёт за пределы предоставленного пространства, включим прокрутку */
}

Тактика вторая
Эта тактика отличается от первой тем, что для резиновых стилей мы указываем отступ не в пикселах, а в процентах.
Код получается такой:

Код:

путь к элементу {
  position: absolute;
  top: 20px; /* отступ сверху */
  left: 10%; /* отступ слева */
  z-index: 1000; /* указываем, что блок должен прорисовываться выше других элементов */
  width: 350px; /* ширина */
  height: 250px; /* высота */
  overflow: auto; /* если содержимое уйдёт за пределы предоставленного пространства, включим прокрутку */
}

Чтобы разместить блок аккурат у границы форума, надо будет от 100% отнять ширину форума и поделить на 2. Так для форума шириной в 80% отступ от края экрана будет составлять 10%.
Тактика третья
Здесь уже надо будет немало поэкспериментировать, чтобы добиться необходимого результата.
В основном дизайны у форумов фиксированной ширины. Чтобы разместить блок в определённом месте относительно его центра (как блок объявлений на этом форуме), представим себе центральную ось и узнаем ширину форума:


Представим расположение блока и узнаем, в какую сторону и насколько нужно будет сдвинуть его левую границу:


Выполним всё в коде:

Код:

путь к элементу {
  position: absolute;
  left: 50%; /* отсчёт от середины страницы */
  top: 110px; /* отступ сверху */
  z-index: 1000;
  width: 490px; /* ширина */
  height: 310px; /* высота */
  overflow: auto;
  margin-left: -100px; /* сдвиг от середины */
}

Принцип работы кода похож на остальные, но здесь нам надо будет указать и отступ (св-во margin). Его значение мы тоже указываем в пикселах; если надо сместить влево - указываем отрицательное значение, если вправо - положительное.

Координаты
Эти указания и примеры позволяют добиться нужного результата, но что делать, если надо закрепить элемент в другом месте, например, внизу страницы?

Кроме свойств left и top есть right (справа) и bottom (снизу). Можно указывать все четыре свойства, а можно и не указывать вообще.

Разместим блок в нижнем-правом углу:

Код:

путь к элементу {
  position: absolute;
  right: 0px;
  bottom: 0px;
  z-index: 1000;
}

Растянем некий блок на всю ширину экрана, закрепим сверху:

Код:

путь к элементу {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 10px;
  z-index: 1000;
}

Оформление
Свои собственные блоки с самого начала не будут обладать никакими стилями и будут просто прозрачны.
Расширяя свой код CSS, можно добавить границы, фон, скругление:

Код:

путь к элементу {
  ...
  background: #ffffff; /* фон - сплошной цвет */
  background: url(ссылка); /* фон - картинка */
  border: 3px solid #000000; /* граница: толщина - тип - цвет */
  border-radius: 5px; /* скругление границы */
  padding: 10px; /* делает внутренний отступ текста от границы */
  ...
}

Помните, что отступы и границы увеличивают ваш блок.

У меня всё нужна будет помощь - пишите!)