CSS_атрибут position задает тип позиционирования, применяемый к элементу. У этого атрибута четыре возможных значения:
static
Это значение, применяемое по умолчанию. Оно указывает, что элемент пози_ ционируется статически в соответствии с нормальным порядком вывода содер_ жимого документа (для большинства западных языков – слева направо и свер_ ху вниз). Статически позиционированные элементы не являются DHTML_эле_ ментами и не могут позиционироваться с помощью атрибутов top, left и дру_ гих. Для позиционирования элемента документа с использованием технологии DHTML сначала нужно установить его атрибут position равным одному из трех других значений.
absolute
Это значение позволяет задать абсолютную позицию элемента относительно содержащего его элемента. Такие элементы позиционируются независимо от всех остальных элементов и не являются частью потока статически позицио_ нированных элементов. Абсолютно позиционированный элемент позициони_ руется либо относительно тела документа, либо, если он вложен в другой аб_ солютно позиционированный элемент, относительно этого элемента. Это наи_ более распространенный в DHTML тип позиционирования. В IE 4 абсолютное позиционирование поддерживается лишь для некоторых элементов. Чтобы организовать абсолютное позиционирование в устаревших броузерах, требу_ ется обернуть абсолютно позиционируемые элементы в теги <div> или <span>.
fixed
Это значение позволяет зафиксировать положение элемента относительно ок_ на броузера. Элементы с фиксированным позиционированием не прокручи_ ваются с остальной частью документа и поэтому могут служить для имита_ ции фреймов. Как и абсолютно позиционированные, фиксировано позицио_ нированные элементы не зависят от всех остальных элементов и не являются частью потока вывода документа. Фиксированное позиционирование поддер_ живается большинством современных броузеров, исключая IE 6.
relative
Если атрибут position установлен в значение relative, элемент располагается в соответствии с нормальным потоком вывода, а затем его положение смеща_
372 Глава 16. CSS и DHTML
ется относительно его обычного положения в потоке. Пространство, выделен_ ное для элемента в нормальном потоке вывода документа, остается выделен_ ным для него, и элементы, расположенные со всех сторон от него, не смыка_ ются для заполнения этого пространства и не выталкиваются с новой пози_ ции элемента.
Установив для атрибута position элемента значение, отличное от static, можно задать положение элемента с помощью произвольной комбинации атрибутов left, top, right и bottom. Наиболее распространенный прием позиционирования – это указание атрибутов left и top, задающих расстояние от левого края элемента_ контейнера (обычно самого документа) до левого края позиционируемого эле_ мента и расстояние от верхнего края контейнера до верхнего края элемента. Так, чтобы поместить элемент на расстоянии 100 пикселов от левого края и 100 пик_ селов от верхнего края документа, можно задать CSS_стили в атрибуте style сле_ дующим образом:
Элемент_контейнер, относительно которого позиционируется динамический элемент, не обязательно совпадает с элементом_контейнером, содержащим дина_ мический элемент в исходном тексте документа. Динамические элементы не яв_ ляются частью обычного потока вывода элементов, поэтому их положение не за_ дается относительно статических элементов_контейнеров, внутри которых они определены. Большинство динамических элементов позиционируются относи_ тельно самого документа (тега <body>). Исключение составляют динамические элементы, определенные внутри других динамических элементов. В этом случае вложенный динамический элемент позиционируется относительно ближайшего динамического предка. Если предполагается позиционировать элемент относи_ тельно контейнера, который является частью потока вывода документа, следует установить правило position:relative для элемента_контейнера, а в качестве зна_ чений атрибутов top и left указать 0px. В этом случае контейнер будет позицио_ нироваться динамически и останется при этом на обычном месте в потоке выво_ да документа. Любые абсолютно позиционируемые вложенные элементы пози_ ционируются относительно элемента_контейнера.
Чаще всего задается положение верхнего левого угла элемента с помощью атри_ бутов left и top, но с помощью атрибутов right и bottom можно задать положение нижнего и правого краев элемента относительно нижнего и правого краев эле_ мента_контейнера. Например, при помощи следующих стилей можно указать, чтобы правый нижний угол элемента находился в правом нижнем углу докумен_ та (предполагая, что он не вложен в другой динамический элемент):
position: absolute; right: 0px; bottom: 0px;
Для того чтобы верхний край элемента располагался в 10 пикселах от верхнего края окна, а правый – в 10 пикселах от правого края окна, можно использовать такие стили:
position: absolute; right: 10px; top: 10px;
Помимо позиции элементов CSS позволяет указывать их размер. Чаще всего это делается путем задания значений атрибутов стиля width и height. Например, сле_ дующий HTML_код создает абсолютно позиционированный элемент без содер_
16.2. CSS для DHTML
жимого. Значения атрибутов width, height и background_color указаны так, чтобы он отображался в виде маленького синего квадрата:
Другой способ определения ширины элемента состоит в одновременном задании атрибутов left и right. Аналогично можно задать высоту элемента, одновремен_ но указав оба атрибута, top и bottom. Однако если задать значения для left, right и width, то атрибут width переопределяет атрибут right, а если ограничивается высота элемента, то атрибут height имеет приоритет перед bottom.
Имейте в виду, что задавать размер каждого динамического элемента не обяза_ тельно. Некоторые элементы, такие как изображения, имеют собственный раз_ мер. Кроме того, для динамических элементов, включающих текст или другое потоковое содержимое, часто достаточно указать желаемую ширину элемента и разрешить автоматическое определение высоты в зависимости от размещения содержимого элемента.
В предыдущих примерах значения атрибутов позиционирования и размера зада_ вались с суффиксом «px», означающим «pixels» (пикселы). Стандарт CSS допус_ кает указание размерности в некоторых других единицах, в том числе в дюймах («in»), сантиметрах («cm»), пунктах («pt») и единицах измерения высоты строки текущего шрифта («em»). Пикселы – это наиболее часто используемые в DHTML_ программировании единицы измерения. Обратите внимание, что стандарт CSS требует указания единиц измерения. Некоторые броузеры могут предполагать пикселы, если единица измерения не указана, но на это не следует особенно по_ лагаться.
CSS позволяет задать положение и размер элемента в процентах от размера эле_ мента_контейнера или в абсолютных единицах с помощью описанных ранее еди_ ниц измерения. Следующий HTML_код создает пустой элемент с черной рамкой, имеющий ширину и высоту в половину элемента_контейнера (или окна броузе_ ра) и расположенный в этом элементе по центру:
Пример позиционирования средствами CSS: текст с тенью
В спецификации CSS2 включен атрибут text_shadow, позволяющий добиться эф_ фекта отбрасывания тени текстовыми элементами. Данный атрибут реализован только в броузере Safari, остальные производители основных броузеров отказа_ лись от его поддержки. По этой причине он был удален из CSS2.1, но в CSS3 вновь рассматривается возможность его включения. Однако добиться эффекта тени можно и без атрибута text_shadow. Для этого достаточно использовать CSS_ средства позиционирования и продублировать текст: первый раз для вывода соб_ ственно текста, второй (может быть третий и более раз) – для воспроизведения тени (или теней). Следующий пример воспроизводит эффект отбрасывания тени (рис. 16.2):
374 Глава 16. CSS и DHTML
Рис. 16.2. Эффект отбрасывания тени, полученный с применениемCSS'средств позиционирования
<div style="font: bold 32pt sans_serif;"> <!__ тени лучше выглядят с крупным шрифтом __> <!__ Текст с тенью должен иметь относительное позиционирование, чтобы __> <!__ можно было обеспечить смещение тени относительно нормального __> <!__ положения текста в потоке вывода __>
<span style="position:relative;">
<!__ Далее определяются три тени различных цветов с использованием __> <!__ абсолютного позиционирования для смещения их на разные расстояния __> <!__ относительно обычного текста __>
<span style="position:absolute; top:5px; left:5px; color: #ccc">С тенью</span> <span style="position:absolute; top:3px; left:3px; color: #888">С тенью</span> <span style="position:absolute; top:1px; left:1px; color: #444">С тенью</span> <!__ Далее следует собственно текст, который отбрасывает тень. Здесь __> <!__ также имеет место относительное позиционирование, чтобы текст __> <!__ выводился поверх своих теней __>
| Без тени<!__ Для сравнения _ этот текст не отбрасывает тень __> </div>
Добавление эффекта тени вручную может оказаться делом достаточно сложным, к тому же это противоречит принципу отделения содержимого от представле_ ния. Решить проблему можно с помощью ненавязчивого JavaScript_кода. В при_ мере 16.2 представлен JavaScript_модуль Shadows.js. В нем определяется функ_ ция Shadows.addAll(), которая просматривает документ (или часть документа) в поисках тегов с атрибутом shadow. Для всех найденных тегов анализируется значение атрибута shadow и с помощью DOM API к тексту, содержащемуся в те_ гах, добавляются тени. В качестве примера с помощью этого модуля можно по_ пробовать воссоздать эффект, представленный на рис. 16.2:
<head><script src="Shadows.js"></script></head> <!__ подключить модуль __> <body onload="Shadows.addAll( );"> <!__ добавить тени после загрузки __>
<div style="font: bold 32pt sans_serif;"> <!__ использовать крупный шрифт __> <!__ Здесь находится атрибут shadow __>
<span shadow='5px 5px #ccc 3px 3px #888 1px 1px #444'>С тенью</span> | Без тени </div>
</body>
Далее приводятся исходные тексты модуля Shadows.js. Примечательно, что ос_ нову данного сценария составляет DOM_код, что является обычным делом при использовании CSS. Однако есть одно исключение – в данном сценарии CSS_сти_ ли непосредственно не создаются, здесь просто устанавливаются CSS_атрибуты
16.2. CSS для DHTML
в создаваемых элементах документа. Далее в этой главе мы более подробно пого_ ворим о приемах создания CSS_стилей.
Пример 16.2. Создание эффекта тени с помощью ненавязчивого JavaScript'кода
/**
* Shadows.js: создание эффекта тени в текстовых элементах средствами CSS.
*
* Этот модуль определяет единственный глобальный объект с именем Shadows.
* Свойствами этого объекта являются две вспомогательные функции.
*
* Shadows.add(element, shadows):
* Добавляет заданные тени к заданному элементу. Первый аргумент _
* это элемент документа или идентификатор элемента. Данный элемент должен
* иметь единственный дочерний текстовый элемент. Эффект тени
* будет воспроизводиться в этом дочернем элементе.
* Порядок определения теней в аргументе shadows описывается далее.
*
* Shadows.addAll(root, tagname):
* Отыскивает все элементы_потомки заданного корневого элемента с указанным
* именем тега. Если в одном из найденных элементов обнаруживается атрибут
* shadow, вызывается функция Shadows.add(), которой передается элемент
* и значение атрибута shadow. Если имя тега не задано, выполняется проверка
* всех элементов. Если корневой элемент не задан, поиск ведется по всему
* документу. Данная функция вызывается единожды после загрузки документа.
*
* Порядок определения теней
*
* Тени задаются строкой в формате [x y color]+. Таким образом, одна или
* более групп определяют смещение по оси x, смещение по оси y и цвет.
* Каждое из этих значений должно соответствовать формату CSS. Если задается
* более одной тени, самая первая тень оказывается самой нижней и ее перекрывают
* все последующие тени. Например: "4px 4px #ccc 2px 2px #aaa"
*/
var Shadows = {};
// Добавить тени к единственному указанному элементу Shadows.add = function(element, shadows) {
if (typeof element == "string")
element = document.getElementById(element);
// Разбить строку по пробелам, предварительно отбросив начальные
// и конечные пробелы
shadows = shadows.replace(/^\s+/, "").replace(/\s+$/, ""); var args = shadows.split(/\s+/);
// Найти текстовый узел, в котором будет реализован эффект тени.
// Этот модуль должен быть расширен, если необходимо добиться эффекта
// во всех дочерних элементах. Однако с целью упрощения примера
// мы решили учитывать только один дочерний элемент.
var textnode = element.firstChild;
// Придать контейнерному элементу режим относительного позиционирования,
// чтобы можно было вывести тени относительно его.
// Порядок работы со свойствами стилей рассмотрен в этой главе далее. element.style.position = "relative";
Глава 16. CSS и DHTML
// Создать тени
var numshadows = args.length/3;
// количество теней?
for(var
i = 0; i < numshadows; i++) { // цикл по каждой
var
shadowX
= args[i*3];
// смещение по оси X
var
shadowY
= args[i*3 + 1];
// смещение по оси Y
var
shadowColor = args[i*3 + 2];
// и цвет
// Создать новый элемент <span> для размещения тени var shadow = document.createElement("span");
// Использовать атрибут style для указания смещения и цвета shadow.setAttribute("style", "position:absolute; " +
