JavaScript. Подробное руководство, 6-е издание, стр. 234

Другой способ задать ширину элемента состоит в одновременном задании значений обоих свойств,

и . Аналогично можно задать высоту элемента, одновременно указав оба свойства, и . Однако если задать значения для свойств , и , то свойство переопределит свойство , а если ограничивается высота элемента, то более высоким приоритетом будет пользоваться свойство .

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

Стандарт CSS требует, чтобы в значениях свойств, определяющих позицию и размер, указывались единицы измерения. В предыдущих примерах значения свойств позиционирования и размера задавались с суффиксом «рх», означающим «pixels» (пикселы). Можно также использовать другие единицы измерения: дюймы («in»), сантиметры («сm»), пункты («pt») и «еm» (размер высоты строки текущего шрифта).

Помимо единиц измерения, представленных выше, CSS позволяет задавать положение и размер элемента в процентах от размера элемента-контейнера. Например, следующая разметка HTML создаст пустой элемент с черной рамкой, имеющий ширину и высоту в половину элемента-контейнера (или окна броузера) и расположенный в этом элементе по центру:

Мы видели, что свойства

и позволяют указывать координаты X и Y элемента в двухмерной плоскости элемента-контейнера. Свойство z-index определяет что-то вроде третьего измерения: оно позволяет определить порядок наложения элементов и указать, какой из двух или более перекрывающихся элементов должен располагаться поверх других. Атрибут z-index представляет собой целое число. По умолчанию его значение равно нулю, но можно задавать положительные и отрицательные значения. Когда два или более элементов перекрываются, они отображаются в порядке от меньших значений z-index к большим, т.е. элемент с большим значением z-index отображается поверх всех остальных. Если перекрывающиеся элементы имеют одинаковые значения z-index, они отображаются в порядке следования в документе, поэтому наверху оказывается последний из перекрывающихся элементов.

Обратите внимание, что порядок наложения определяется свойством z-index только для смежных элементов (т. е. для дочерних элементов одного контейнера). Если перекрываются два несмежных элемента, то на основе индивидуальных значений свойств z-index нельзя указать, какой из них должен находиться сверху. Вместо этого надо задать атрибут z-index для двух смежных контейнеров перекрывающихся элементов.

Способ размещения непозиционируемых элементов (элементов со значением по умолчанию режима позиционирования

) исключает возможность перекрытия, поэтому к ним свойство z-index не применяется. Тем не менее они получают значение z-index, по умолчанию равное нулю, т.е. позиционируемые элементы с положительным значением z-index отображаются поверх обычного потока вывода документа, а позиционируемые элементы с отрицательным значением z-index оказываются ниже обычного потока вывода документа.

Спецификация CSS3 включает свойство

, позволяющее добиться эффекта отбрасывания тени текстовыми элементами. Данное свойство поддерживается многими текущими броузерами, однако добиться эффекта тени можно и с помощью CSS-свойств позиционирования, для чего достаточно продублировать, сместив, выводимый текст:

Текст, отбрасывающий тень, заключается в относительно позиционируемый элемент

. Для него не определяются свойства, задающие позицию, поэтому текст отображается в обычной позиции в потоке. Тень заключается в абсолютно позиционируемый элемент <span>, помещенный в относительно позиционируемый элемент <span> (и поэтому позиционируется относительно него). Свойство z-index обеспечивает отображение тени под текстом.

16.2.2. Рамки, поля и отступы

Стандарт CSS позволяет задавать поля, рамки и отступы для любого элемента. Рамка элемента - это прямоугольник, обрисованный вокруг (полностью или частично) этого элемента. CSS-свойства позволяют задать стиль, цвет и толщину рамки: