Stfw.RuКак зафиксировать слой, чтобы он оставался на одном месте при прокрутке страницы?
🕛 19.01.2009, 19:31
«Замораживание» слоя в определенном месте веб-страницы происходит с помощью стилевого атрибута position со значением fixed. При этом положение слоя не меняется даже при прокрутке страницы с помощью скроллинга. Сами координаты слоя задаются через атрибуты left, right, top и bottom, которые соответственно определяют положение от левого, правого, верхнего и нижнего края окна браузера (пример 1).Пример 1. Использование атрибута position
HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <title>Фиксированный слой</title> <style type="text/css"> #menu { position: fixed; /* Фиксированное положение */ right: 10px; /* Расстояние от правого края окна браузера */ top: 20%; /* Расстояние сверху */ padding: 10px; /* Поля вокруг текста */ background: #ffe; /* Цвет фона */ border: 1px solid #333; /* Параметры рамки */ } .text { height: 1000px; } </style> </head> <body> <div id="menu">Меню</div> <div class="text"></div> </body>
</html>Следует помнить, что значение fixed атрибута position не работает в браузере Internet Explorer до шестой версии включительно.