Плавающая кнопочка

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

Как Вы, дорогой читатель, уже, наверное, заметили, справа внизу в этом блоге вслед за прокруткой "плывёт" кнопочка "поиск". На первый взгляд, приходят в голову сложные и полные труднозапоминаемых ухищрений решения с использованием JavaScript, но на самом деле всё гораздо проще - лишь чистый css, о чём ниже.

Для того чтобы элемент "плавал", ему нужно задать фиксированную позицию на экране. Это делается очень просто. Назовём блок, который должен плавать вслед за прокруткой "fixed_block" или любое другое название. Для начала в таблице стиле(CSS) создадим элемент-класс ".fixed_block", прописав строчку "position:fixed;", указывающуюю на фиксированную позицию на экране, "bottom:5px;" и "right:5px;", указывающие положение элемента относительно нижнего и правого края экрана соответственно(также есть аналогичные элементы "top" и "left"). Далее можно оформить блок как угодно. В данном случае - стиль, цвет и тип border'а, а также фон. Пример описания моего блока в CSS:

.fixed_block {position:fixed;bottom:5px;right:5px;border:1px solid #eee;padding:5px;width:5%;text-align:center;background:#aaa;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px}
Теперь осталось впихнуть наш блок с содержимым, в любое место страницы(лучше в конец, дабы не было ошибок в отображение элемента). Теперь просто объявлемя контейнер div и присваиваем ему значение класса fixed_block:

<div class="fixed_block">Здесь размещаем контент, содержащийся в плавающем блоке</div>