- •4.2.1. Повторные и опущенные объявления
- •Типы данных
- •3.1.3. Литералы вещественных чисел
- •3.1.6. Специальные числовые значения
- •3.2.2. Управляющие последовательности в строковых литералах
- •3.3. Логические значения
- •3.4.1. Функциональные литералы
- •3.6. Массивы
- •7.6.1. Добавление новых элементов в массив
- •7.7.9. Методы toString() и toLocaleString()
- •7.7.10. Дополнительные методы массивов
- •11.1.2. Классы символов
- •11.1.3. Повторение
- •11.1.4. Альтернативы, группировка и ссылки
- •11.1.6. Флаги
- •1 Здесь функция alert() используется просто для отображения информации: она
- •13.2.2. Сценарии во внешних файлах
- •13.3. Обработчики событий в html
- •13.5.5. Объект Window как контекст исполнения
- •15.2. Свойства объекта Document
- •1 Модель dom может также использоваться для представления xmLдокументов,
- •15.4.2. Узлы
- •15.4.2.1. Типы узлов
- •1 Стандарт dom определяет интерфейсы, а не классы. Те, кто не знаком с термином
- •15.4.2.2. Атрибуты
- •15.5. Обход документа
- •1 Во многих сложных dhtmLэффектах используются также приемы обработки
- •16.1. Обзор css
- •1 Эрик Мейер «css – каскадные таблицы стилей. Подробное руководство», 3е из
- •16.1.1. Применение правил стиля к элементам документа
- •16.2.1. Ключ к dhtml: абсолютное позиционирование
- •16.2.3. Определение положения и размеров элемента
- •16.3.2. Работа со свойствами стилей
- •300 Пикселов:
- •17.1.1.1. Аппаратнозависимые и аппаратнонезависимые события
- •17.1.2. Обработчики событий как атрибуты
- •1 Подробное описание htmLформ, включая пример проверки правильности за
- •17.2.6.3. Интерфейс MouseEvent
- •17.5. События клавиатуры
- •17.5.1. Типы событий клавиатуры
- •17.5. События клавиатуры 441
16.2.1. Ключ к dhtml: абсолютное позиционирование
CSSатрибут position задает тип позиционирования, применяемый к элементу.
У этого атрибута четыре возможных значения:
static
Это значение, применяемое по умолчанию. Оно указывает, что элемент пози
ционируется статически в соответствии с нормальным порядком вывода содер
жимого документа (для большинства западных языков – слева направо и свер
ху вниз). Статически позиционированные элементы не являются DHTMLэле
ментами и не могут позиционироваться с помощью атрибутов top, left и дру
гих. Для позиционирования элемента документа с использованием технологии
DHTML сначала нужно установить его атрибут position равным одному из
трех других значений.
absolute
Это значение позволяет задать абсолютную позицию элемента относительно
содержащего его элемента. Такие элементы позиционируются независимо от
всех остальных элементов и не являются частью потока статически позицио
нированных элементов. Абсолютно позиционированный элемент позициони
руется либо относительно тела документа, либо, если он вложен в другой аб
солютно позиционированный элемент, относительно этого элемента. Это наи
более распространенный в DHTML тип позиционирования. В IE 4 абсолютное
позиционирование поддерживается лишь для некоторых элементов. Чтобы
организовать абсолютное позиционирование в устаревших броузерах, требу
ется обернуть абсолютно позиционируемые элементы в теги <div> или <span>.
fixed
Это значение позволяет зафиксировать положение элемента относительно ок
на броузера. Элементы с фиксированным позиционированием не прокручи
ваются с остальной частью документа и поэтому могут служить для имита
ции фреймов. Как и абсолютно позиционированные, фиксировано позицио
нированные элементы не зависят от всех остальных элементов и не являются
частью потока вывода документа. Фиксированное позиционирование поддер
живается большинством современных броузеров, исключая IE 6.
relative
Если атрибут position установлен в значение relative, элемент располагается
в соответствии с нормальным потоком вывода, а затем его положение смеща
overflow Определяет, что следует делать, если размер элемента боль
ше, чем предоставленное ему место
margin, border, padding Границы и рамки элемента
background Цвет фона или фоновый рисунок для элемента
opacity Степень непрозрачности (или прозрачности) элемента. Этот
атрибут относится к стандарту CSS3 и поддерживается не все
ми броузерами. Работающая альтернатива имеется для IE
Атрибут(ы) Описание372 Глава 16. CSS и DHTML
ется относительно его обычного положения в потоке. Пространство, выделен
ное для элемента в нормальном потоке вывода документа, остается выделен
ным для него, и элементы, расположенные со всех сторон от него, не смыка
ются для заполнения этого пространства и не выталкиваются с новой пози
ции элемента.
Установив для атрибута position элемента значение, отличное от static, можно
задать положение элемента с помощью произвольной комбинации атрибутов
left, top, right и bottom. Наиболее распространенный прием позиционирования –
это указание атрибутов left и top, задающих расстояние от левого края элемента
контейнера (обычно самого документа) до левого края позиционируемого эле
мента и расстояние от верхнего края контейнера до верхнего края элемента. Так,
чтобы поместить элемент на расстоянии 100 пикселов от левого края и 100 пик
селов от верхнего края документа, можно задать CSSстили в атрибуте style сле
дующим образом:
<div style="position: absolute; left: 100px; top: 100px;">
Элементконтейнер, относительно которого позиционируется динамический
элемент, не обязательно совпадает с элементомконтейнером, содержащим дина
мический элемент в исходном тексте документа. Динамические элементы не яв
ляются частью обычного потока вывода элементов, поэтому их положение не за
дается относительно статических элементовконтейнеров, внутри которых они
определены. Большинство динамических элементов позиционируются относи
тельно самого документа (тега <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 373
жимого. Значения атрибутов width, height и backgroundcolor указаны так, чтобы
он отображался в виде маленького синего квадрата:
<div style="position: absolute; top: 10px; left: 10px;
width: 10px; height: 10px; backgroundcolor: blue">
</div>
Другой способ определения ширины элемента состоит в одновременном задании
атрибутов left и right. Аналогично можно задать высоту элемента, одновремен
но указав оба атрибута, top и bottom. Однако если задать значения для left, right
и width, то атрибут width переопределяет атрибут right, а если ограничивается
высота элемента, то атрибут height имеет приоритет перед bottom.
Имейте в виду, что задавать размер каждого динамического элемента не обяза
тельно. Некоторые элементы, такие как изображения, имеют собственный раз
мер. Кроме того, для динамических элементов, включающих текст или другое
потоковое содержимое, часто достаточно указать желаемую ширину элемента
и разрешить автоматическое определение высоты в зависимости от размещения
содержимого элемента.
В предыдущих примерах значения атрибутов позиционирования и размера зада
вались с суффиксом «px», означающим «pixels» (пикселы). Стандарт CSS допус
кает указание размерности в некоторых других единицах, в том числе в дюймах
(«in»), сантиметрах («cm»), пунктах («pt») и единицах измерения высоты строки
текущего шрифта («em»). Пикселы – это наиболее часто используемые в DHTML
программировании единицы измерения. Обратите внимание, что стандарт CSS
требует указания единиц измерения. Некоторые броузеры могут предполагать
пикселы, если единица измерения не указана, но на это не следует особенно по
лагаться.
CSS позволяет задать положение и размер элемента в процентах от размера эле
ментаконтейнера или в абсолютных единицах с помощью описанных ранее еди
ниц измерения. Следующий HTMLкод создает пустой элемент с черной рамкой,
имеющий ширину и высоту в половину элементаконтейнера (или окна броузе
ра) и расположенный в этом элементе по центру:
<div style="position: absolute; left: 25%; top: 25%; width: 50%; height: 50%;
border: 2px solid black">
</div>