Как создается свободно позиционируемый элемент
Теперь рассмотрим таблицу стилей. В ней мы использовали множество новых атрибутов, которые сейчас и рассмотрим.
Этот атрибут делает элемент страницы свободно позиционируемым:
position: absolute;Запомните его – он обязательно должен присутствовать в определении стиля любого свободного элемента. Если у вас что-то не работает, прежде всего, проверьте, задали ли вы для данного атрибута соответствующее значение.
У обычного фиксированного элемента названный атрибут установлен в значение static. Это же его значение по умолчанию.
Эти атрибуты задают, соответственно, горизонтальную и вертикальную координаты левого верхнего угла свободного элемента:
left: 50; top: 50;В данный момент они заданы в пикселах, хотя вы можете использовать любую из поддерживаемых CSS единиц измерений. Имейте в виду, что данные атрибуты имеют силу только для свободно позиционируемых элементов, т. е. тех, у которых атрибут position установлен в значение absolute.
Примечание
Запомните, что координаты свободно позиционируемого элемента отсчитываются относительно родителя, а не относительно окна Web-обозревателя. Поскольку в нашем случае родителем является сама-страница, это несущественно, но вообще об этом забывать не следует.
А эти атрибуты задают, соответственно, ширину и высоту свободно позиционируемого элемента:
width: 200; height: 100;Они также даны в пикселах, хотя могут быть заданы в любой другой из поддерживаемых CSS единиц измерения. И также имеют силу только у свободно позиционируемых элементов.
А теперь взгляните еще раз на рис. 11.1. Вы видите, что высота нашего свободного элемента заметно больше ста пикселов (сравните ее с шириной). Дело в том, что по умолчанию свободный элемент растягивается по вертикали, если его содержимое в нем не помещается. А у нас как раз такой случай. (Как уже говорилось, вы можете задать другое поведение, но об этом позже.)
background-color: #00FF00;Здесь специально задан зеленый фон для свободно позиционируемого элемента, чтобы он был заметнее.
А теперь держитесь крепче! Добавлением всего одной строки в таблицу стилей мы превратим свободно позиционируемый элемент в небольшую "страничку в странице" (добавленный текст выделен полужирным шрифтом).
#para { position: absolute; left: 50; top: 50; width: 200; height: 100; background-color: #00FF00; overflow: scroll }Сохраните новый файл под именем 11.2.htm и откройте его в Web-обозревателе. И как оно вам (рис. 11.2)?
Давайте еще раз взглянем на добавленную нами строку:
— Регулярная проверка качества ссылок по более чем 100 показателям и ежедневный пересчет показателей качества проекта.
— Все известные форматы ссылок: арендные ссылки, вечные ссылки, публикации (упоминания, мнения, отзывы, статьи, пресс-релизы).
— SeoHammer покажет, где рост или падение, а также запросы, на которые нужно обратить внимание.
SeoHammer еще предоставляет технологию Буст, она ускоряет продвижение в десятки раз, а первые результаты появляются уже в течение первых 7 дней. Зарегистрироваться и Начать продвижение
overflow: scrollГде overflow – атрибут, как раз и задающий поведение свободно позиционируемого элемента, когда его содержимое в нем не помещается. Значение по умолчанию – auto – заставляет элемент растягиваться по вертикали, что мы и наблюдали в предыдущем случае. А значение scroll заставляет элемент отобразить полосы прокрутки.
Рис. 11.2. Свободно позиционируемый абзац текста с возможностью прокрутки содержимого
Теперь посмотрим, как это выглядит в Dreamweaver MX, т. е. самой последней (да и в предыдущей версии – 4.0 – этот код будет выглядеть так же).
<HTML> <HEAD> <TITLE>Пример WEB-страницы</TITLE> <SCRIPT> <!-- Сценарий, необходимый для нормальной работы этой Web-страницы в старых версиях Navigator --> </SCRIPT></HEAD> <BODY> <DIV ID="para" STYLE="position: absolute; left: 50; top: 50; width: 200; height: 100; background-color: #00FF00; overflow: scroll">Это текст, который будет показан в окне Web-обозревателя. Это текст, который будет показан в окне Web-обозревателя. Это текст, который будет показан в окне Web-обозревателя. Это текст, который будет показан в окне Web-обозревателя. Это текст, который будет показан в окне Web-обозревателя. Это текст, который будет показан в окне Web-обозревателя. </DIV></BODY> </HTML>Этот код дает тот же самый результат, что и предыдущий. Просто выглядит более компактным, особенно если выбросить код сценария, "отвечающего" за совместимость с Navigator.
Вот и все. Как видите, превратить фиксированный элемент страницы в свободный не составляет особого труда. Нужно всего лишь задать соответствующие стили и заменить теги <р> на <DIV>. А в большинстве случаев вам даже не нужно будет более-менее серьезно переделывать дизайн ваших страниц, если, конечно, они не основаны на фреймах или таблицах.
Вопрос в другом. Так ли уж нужны нам эти свободно позиционируемые элементы?