Каскадные таблицы стилей - Позиционирование CSS

Позиционирование CSS

В этой главе

Схемы позиционирования
Смещение блоков
Обтекание
Размеры блоков
Максимальные и минимальные размеры
Переполнение блоков
Усечение
Видимость
Слои

К настоящему моменту нам уже известны почти все основополагающие принципы CSS: синтаксис, селекторы и модель представления. Что еще остается узнать прежде, чем перейти к изучению таких, в общем-то, банальных вещей, как шрифтовое и цветовое оформление? Ведь именно для оформления были предназначены каскадные таблицы стилей? На самом деле, есть еще один очень важный аспект применения CSS, а именно – позиционирование. Именно позиционирование помогает создавать разметку web-страниц, и именно благодаря мощным и гибким механизмам позиционирования в CSS 2 можно отказаться от применения такого архаичного метода верстки web-страниц, как использование HTML-таблиц.

Безусловно, позиционирование с использованием таблиц стилей – тема достаточно сложная, богатая многими нюансами и различными «подводными камнями» в части толкования правил CSS разработчиками разных программ просмотра. Но, с другой стороны, игра стоит свеч, поскольку отказ от верстки документов с использованием обычных таблиц и прочих «хитростей» вроде невидимых изображений, позволяет добиться гибкости в оформлении. А при умелом использовании возможностей CSS можно получать достаточно сложные эффекты, зачастую даже нереализуемые средствами XHTML, и все это – без нагромождений лишнего кода.

Схемы позиционирования

В каскадных таблицах стилей, начиная с уровня 2, поддерживается три вида позиционирования: нормальный поток (normal flow), перемещаемые объекты (floats) и абсолютное позиционирование (absolute positioning). Суть этих схем сводится к следующим особенностям размещения:

Нормальный поток. К схеме нормального потока относится все блочное форматирование структурных элементов (block), строковое форматирование строковых (inline) блоков, относительное позиционирование структурных и строковых блоков, а так же позиционирование контентно-зависимых (run-in) блоков;
Перемещаемые объекты. Согласно этой схеме объект (блочный или строковой) сначала позиционируется в нормальном потоке, а затем смещается максимально влево или вправо. При этом остальное содержимое может обтекать такой объект по противоположной стороне (т.е. по стороне «всплывания»);
Абсолютное позиционирование. В схеме абсолютного позиционирования блок полностью удаляется из нормального потока (и не влияет на последующие сестринские элементы), а затем ему назначается положение относительно содержащего контейнера.

За назначение элементу той или иной схемы позиционирования в CSS 2 отвечают свойства position и float, причем первое служит для позиционирования в нормальном потоке и абсолютного, а второе – только для создания перемещаемых объектов.

Рассмотрим здесь свойство position. Оно может принимать одно из значений, приведенных в таблице3.6.

Таблица 3.6. Виды позиционирования CSS
Значение	Задаваемый вид позиционирования	Описание
static	Нормальный поток (принято по умолчанию)	Обычный блок, позиционируемый в контексте общего потока. Позиционирование с помощью свойств CSS left и top невозможно
relative	Перемещаемый объект	Сначала позиционируется как обычный блок, а затем смещается (свойства left, top) относительно этого положения. Расположение следующего блока будет рассчитываться так, как будто этот не был смещен
absolute	Абсолютное позиционирование	Положение блока (а, возможно, и его размер) задается при помощи свойств left, top, right, bottom. Они указывают величину смещения относительно содержащего контейнера блока
fixed	Абсолютное позиционирование (кроме MSIE 6-7)	Размещение происходит аналогично absolute, но затем блок фиксируется относительно окна браузера и не перемещается при прокрутке

Рассмотрим поведение позиционированных блоков на примере, для чего обратимся к листингу 3.6.

Листинг 3.6. Позиционирование

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
 <title>Позиционирование</title>
 <style type="text/css">
  #abs1 {position: absolute; border: solid pink; color: pink}
  #stat1 {position: static; border: solid navy; color: navy}
  #rel1 {position: relative; top: 5px; border: solid brown; color: brown}
  #abs2 {position: absolute; border: solid green; color: green}
 </style>
</head>
<body>
 <div id="abs1">
  Абсолютно позиционированный блок (absolute) изымается из общего потока.
 </div>
 <div id="stat1">
  Поэтому следующий за ним в документе обычный (static) блок выводится браузером не после него, а так, как будто перед ним ничего нет (в данном случае это приводит к наложению).
 </div>
 <div id="rel1">
  А относительно позиционированный блок (relative) смещается от того места, где он должен находиться, на указанную величину (в данном случае - на 5 пикселей вниз).
 </div>
 <div id="abs2">
  При всем этом, если для абсолютно позиционированного блока расположение явно не указано, то оно вычисляется исходя из того, где он должен был бы быть в общем потоке.
 </div>
</body>
</html>

Всего здесь задано 4 блока, 2 из которых (первый и последний) являются абсолютно позиционированными, а 2 других – нормального потока. Для обоих абсолютно позиционированных блоков никаких координат не задано, поэтому они выводятся там, где должны были бы быть в общем потоке. Так, первый блок выведен в самом начале документа. Однако из-за того, что он выведен из общего потока документа, то начиная выводить следующий за ним блок, браузер полагает, что до него ничего не было. В итоге начальная координата вывода у обоих блоков совпадает, что приводит к их наложению друг на друга (рис. 3.9).

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

Абсолютное и относительное позиционирование CSS

Рис. 3.9. Абсолютное и относительное позиционирование

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

Фиксированное позиционирование аналогично абсолютному с той лишь разницей, что фиксированные блоки всегда находятся на одном и том же месте относительно области просмотра. Например, можно создать такой фиксированный блок:

<div style="position: fixed">
 Фиксированный блок
</div>

Если теперь заполнить документ каким-либо содержимым так, чтобы появилась полоса прокрутки, то можно будет увидеть, что во время прокрутки документа текст «Фиксированный блок» остается на месте (см. файл Part_3\Position\fixed.html). К сожалению, такое поведение верно лишь для Mozilla-браузеров и Opera, а Netscape 4 и MSIE не воспринимают ключевое слово «fixed», и, как следствие, такой блок будет считаться обычным (static). Соответственно, для обеспечения совместимости желательно использовать оба объявления – сначала absolute, а затем – fixed и «развести» их при помощи правил селекторов так, чтобы не поддерживающие фиксированный вывод браузеры «увидели» абсолютное позиционирование, а более прогрессивные – фиксированное. В таком случае блок, по крайней мере, будет выведен из общего потока, и не будет влиять на дальнейший вывод документа.

Свойства position

Значение по умолчанию: static.
Наследуемые значения: нет.
Применяется: ко всем элементам.
Совместимость: все.

Смещение блоков

Только что мы рассмотрели управление позиционированием при помощи свойства position, но собственно изменение расположения объектов на экране осталось не освещенным. Итак, за смещение блоков в CSS отвечают 4 свойства – top, right, left и bottom. Параллельно эти же свойства могут влиять и на размеры блока, хотя для указания размеров предусмотрены другие свойства – width и height, но о них речь пойдет несколько позже. Что же касается свойств смещения, то они определяют следующее:

top. Задает смещение верхнего сегмента внутренней краевой линии относительно верхнего сегмента краевой линии содержащего блока, или, проще говоря – определяет смещение верхней границы вниз относительно того места, где этот блок должен был находиться;
right. Задает смещение правого сегмента внутренней краевой линии относительно правого сегмента краевой линии содержащего блока (определяет смещение правой границы влево);
left. Задает смещение левого сегмента внутренней краевой линии относительно левого сегмента краевой линии содержащего блока (определяет смещение левой границы вправо);
bottom. Задает смещение нижнего сегмента внутренней краевой линии относительно нижнего сегмента краевой линии содержащего блока (определяет смещение нижней границы вверх).

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

ПРИМЕЧАНИЕ
На самом деле, это важное замечание: нередко можно услышать, что, дескать, что-то с браузерами или с CSS не так, поскольку смещения при помощи left, top и т.д. «не работают». На самом деле, такая проблема может иметь лишь одно объяснение: для блока, к которому пытаются применить смещение, не указано нужное позиционирование – ведь для принятого по умолчанию статического размещения указывать смещение недопустимо!

Значения для смещения задаются либо в абсолютных размерах (length), либо в процентах по отношению к ширине содержащего блока, либо указывают auto. Последнее значение принято по умолчанию, и находится в зависимости от таких свойств, как width и height, которые, в свою очередь, могут быть вычисляемыми на основании содержимого блоков. Важно так же отметить, что значения могут быть как положительными, так и отрицательными, т.е. если запись «left: 100px» указывает на смещение левой краевой линии блока вправо на 100 пикселей, то «left: -100px» заставит браузер сместить левую границу на 100 пикселей влево.

На практике чаще всего задают пару значений left и top, определяя таким образом левую верхнюю вершину образующего блок прямоугольника, а значения right и bottom вычисляются браузером автоматически на основании размеров блока:

.menu {position: absolute; left: 10px; top: 50px; }

Здесь задан класс menu, определяющий абсолютно позиционированный блок со смещением левой границы на 10 пикселей вправо и верхней – на 50 вниз. Примеры такого позиционирования со смещением можно посмотреть в файле topleft.html.

Свойства top, right, left и bottom

Значение по умолчанию: auto.
Наследуемые значения: нет.
Применяется: к позиционированным элементам.
Совместимость: top и left – все, right и bottom – все, кроме MSIE 6-7.

Обтекание

Теперь, когда мы уже знакомы с относительным и абсолютным позиционированием, и даже умеем устанавливать смещение, обратимся к последнему виду позиционирования – перемещаемым объектам. Перемещаемый объект - это блок, который смещается по строке в левую или правую сторону. Особенностью перемещаемого объекта является то, что содержимое может передвигаться вдоль одной из его сторон: вдоль правой стороны для левостороннего перемещаемого блока и вдоль левой стороны для правостороннего перемещаемого блока. Чтобы сделать блок обтекаемым, а заодно определить, по какой стороне должно происходить обтекание, используют свойство float, которое может принимать одно из трех значений:

left. Перемещаемый блок будет смещен максимально влево, а обтекание будет происходить по правой стороне;
right. Перемещаемый блок будет смещен максимально вправо, а обтекание будет происходить по левой стороне;
none. Блок не перемещается и обтекание не производится (принято по умолчанию).

По своей сути свойство float схоже с HTML-атрибутом ALIGN у элементов типа IMG, OBJECT и подобных. Однако в CSS предусматривается его использование не только для картинок и иных внедряемых объектов, но и для любых блоков: .lf {float: left; }

Здесь мы определили класс «lf», и любой объект этого класса, будь то рисунок, абзац или таблица, будет смещен влево, и иметь обтекание по правой границе (см. файл floats.html).

При всем этом следует учитывать, что поскольку перемещаемый объект, с одной стороны, должен быть сдвинут к краю, а с другой – получить обтекание, то для него должна быть определена ширина, и желательно – явно, при помощи свойства width. Впрочем, с размерностью в CSS 2 нам еще предстоит плотно познакомиться, в то время, как к свойству float имеет непосредственное отношение еще одно свойство CSS – clear, отвечающее за возможность обтекания. Оно определяет, какие стороны блока, порожденного элементом, не могут соседствовать с расположенным ранее перемещаемым блоком.

Рассмотрим этот аспект подробнее. Пусть у нас имеется перемещаемый блок с обтеканием справа (float: left). Если за ним расположить другой блок со свойством clear, также установленным в left (clear: left), то содержимое такого блока обтекать его не будет, а расположится после него: для этого автоматически будет расширено его верхнее внешнее поле (margin). Если же следующий за перемещаемым блоком элемент будет иметь свойство clear, установленное в right, то обтекание будет происходить. Верно и обратное: если бы перемещаемый блок имел обтекание по правой стороне (float: right), то следующий блок (с clear: left) так же смог обтекать его.

Но если понадобится запретить обтекание в любом случае, то можно воспользоваться еще одним значением для свойства clear – both, запрещающим обтекание по обеим сторонам блока.

Наконец, если запрещать обтекание не надо, то можно использовать значение none, либо вообще не указывать свойство clear, поскольку именно none является значением по умолчанию.

Свойства float

Значение по умолчанию: none.
Наследуемые значения: нет.
Применяется: float - ко всем элементам, кроме абсолютно позиционированных блоков; clear – только к структурным блокам.
Совместимость: все.

Размеры блоков

Рассматривая вопросы позиционирования, мы уже неоднократно упоминали размеры блоков, но ни разу не рассматривали специально предназначенные для этого свойства CSS. Пора восполнить этот пробел и познакомиться со свойствами width и height, которые отвечают соответственно за ширину и высоту блока.

Начнем с ширины, как с наиболее предсказуемого и хорошо поддерживаемого браузерами свойства. Подобно другим элементам размерности блоков, ширину можно задавать в пикселях или в других абсолютных размерах (length), в процентах по отношению к ширине содержащего блока, или же при помощи ключевого слова auto для того, чтобы браузер подобрал ширину самостоятельно. Важно отметить, что свойство width задает ширину содержимого контейнера, т.е. размеры по внутренней границе блока.

ВНИМАНИЕ
Браузеры MSIE версий 5.0 и 5.5 воспринимает width как ширину содержимого вместе с рамкой и внутренним полем. Эта ошибка была исправлена только в версии 6.0, причем для корректного восприятия требуется наличие определения DOCTYPE в заголовке документа. В противном случае MSIE 6 будет использовать т.н. «режим совместимости со старыми версиями», и размеры также будут определены неверно.

Рассмотрим типичное применение ширины – для ограничения ширины блока-врезки. Пусть это будет уникальный блок с идентификатором w1, шириной содержимого 200 пикселей, внутренним отступом 15 пикселей и внешним полем в 10 пикселей, с обтеканием по правой стороне:

#w1 {width: 200px; padding: 15px; margin: 10px; float: left;}

Содержимое такого блока будет ограничено по ширине 200-ми пикселями, а все последующее содержимое документа будет обтекать его справа. Таким содержимым может быть и другой блок, имеющий определенную ширину, например, половину окна браузера:

#w2 {width: 50%; padding: 5px; margin: 0px; }

Если теперь создать документ, содержащий элементы с идентификаторами w1 и w2, заодно (для наглядности) добавив к определению стилей рамки, как это показано в листинге 3.7, то можно будет увидеть использование ширины блоков и их взаимное расположение (рис. 3.10).

Листинг 3.7. Использование width

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
 <title>Ширина</title>
 <style type="text/css">
  #w1 {width: 200px; padding: 15px; margin: 10px; border: dashed 1px gray; float: left;}
  #w2 {width: 50%; padding: 5px; margin: 0px; border: dashed 1px gray;}
</style>
</head>
<body>
 <div id="w1">
  Блок w1 с шириной содержимого 200 пикселей, с внутренним полем 15 пикселей, и внешним полем в 10 пикселей.
 </div>
 <div id="w2">
  Блок w2 с шириной содержимого в половину окна браузера и внутренним полем 5 пикселей.
 </div>
</body>
</html>

Рис. 3.10. Блок w2 обтекает блок w1, а общая часть внешнего поля установлена в 10 пикселей

При этом следует отметить, что, с одной стороны, внешние поля у двух смежных блоков сливаются в одно размером с наибольшее из двух, а с другой – левое поле второго блока было автоматически расширено таким образом, чтобы содержимое блоков не пересекалось. Правда, последнее условие не выполняется в MSIE: этот браузер перемещает второй блок вправо полностью, вместе с полями и содержимым (рис. 3.11).

В MSIE 6 блок w2 превратился в относительно позиционированный, а логика вычисления общей границы ни

Рис. 3.11. В MSIE блок w2 превратился в относительно позиционированный, а логика вычисления общей границы известна только Богу и Гейтсу

Хотя такое поведение и не является верным с точки зрения правил CSS, учитывая популярность браузера от Microsoft, приходится брать данную особенность Internet Explorer в расчет. В данном случае проблема может быть частично решена вкладыванием блока w1 в контейнер w2:

<div id="w2">
 <div id="w1">
  Блок w1...
 </div>
 Блок w2...
</div>

ПРИМЕЧАНИЕ
Хотя подобное решение и снимает проблему с размещением блоков, остается открытым вопрос с размерами полей: тут остается лишь подбирать значения таким образом, чтобы сохранить приемлемый внешний вид для обоих форматов вывода, т.е. для продукта Microsoft – с одной стороны, и всех остальных программ, поддерживающих таблицы стилей – с другой.

Аналогично ширине, в CSS назначается и высота, только вместо свойства width используют свойство height:

#h1 {height: 100px;}

Посмотреть примеры использования свойства width можно, обратившись к файлу width.html, а свойства height – height.html.

Свойства width и height

Значение по умолчанию: auto.
Наследуемые значения: нет.
Применяется: ко всем элементам, кроме незаменяемых строковых, строк таблиц и групп строк таблиц.
Совместимость: все.

Максимальные и минимальные размеры

В ряде случаев бывает полезным не просто задать высоту (или ширину) блока, а указать ее минимальное или максимальное значение. Например, на всех страницах сайта может быть блок для основной информации, причем, вполне вероятно, что на одних он будет иметь всего несколько строк в высоту, а на других – несколько десятков или даже сотен. В таком случае указывать какое-либо определенное значение для height становится бессмысленным, поскольку либо особо «объемные» страницы в нем не уместятся, либо будет слишком много места в «коротких» страницах. Здесь нам на помощь приходит свойство min-height, позволяющее указать минимальное значение высоты блока:

div.content {min-height: 300px;}

Таким образом мы задали минимальную высоту для блоков класса content в 300 пикселей. В результате, даже если в нем будет всего одна строка текста (или даже вообще ничего не будет!), все равно он займет отведенные ему 300 пикселей в высоту. До этого момента свойство min-height действует подобно height. Однако если мы поместим в этот блок какое-либо содержимое, не вписывающееся в высоту 300 пикселей, он будет автоматически расширен.

ПРИМЕЧАНИЕ
С этой точки зрения свойство min-height похоже не то, как работает height в MSIE. И поскольку MSIE не поддерживает установку минимальных и максимальных размеров, в ряде случаев можно использовать height для MSIE и min-height – для других браузеров – см. пример в файле minmax.html.

Противоположное свойство max-height, наоборот, ограничивает максимально допустимую высоту блока, что, в свою очередь, может быть полезно для тех случаев, когда содержимое второстепенного блока может испортить дизайн страницы, если вдруг выйдет за определенные рамки. Это может быть, рекламный блок или любое иное содержимое, потеря части видимости которого никого не разочарует:

div.banner {max-height: 50px; max-width: 50%;}

Здесь мы использовали сразу два ограничения – в 50 пикселей по высоте при помощи max-height, и в половину от максимально возможной ширины, применив свойство max-width.

ВНИМАНИЕ
Обратите внимание: значения, задаваемые в процентах, рассчитываются относительно автоматически вычисляемого размера самого генерируемого блока, а не от размера содержащего блока. Это верно и для «обычных», и для максимальных и минимальных размеров.

Наконец, если нам понадобилось бы ограничить ширину не в максимальном, а в минимальном значении, то мы могли бы применить свойство min-width:

div.info {min-width: 100px;}

Здесь мы указали, что блоки с классом info должны иметь ширину не менее 100 пикселей.

Минимальные и максимальные значения можно комбинировать. Допустим, нам надо сделать так, чтобы блок заголовка страницы был выстой не менее 2 строк, но не более 3. В таком случае достаточно написать следующее:

div.header (min-height: 2em; max-height: 3em;}

Остается только добавить, что если указано непосредственное значение ширины или высоты блока, т.е. width или height, то указание минимальных и максимальных значений теряет всякий смысл, поскольку в таком случае они будут автоматически приведены к значениям, указанным в height (для min-height и max-height) или в width (для min-width и max-width).

Значение по умолчанию: auto.
Наследуемые значения: нет.
Применяется: ко всем элементам, кроме незаменяемых строковых и элементов таблиц.
Совместимость: все, кроме MSIE 6-7.

Переполнение блоков

Довольно часто происходит так, что содержимое блока не укладывается в него (допустим, блок с заданными размерами 100 на 150 пикселей содержит картинку 150 на 200, или просто много текста). В таком случае его размеры должны остаться неизменными, но само содержимое, тем не менее, будет показано полностью, перекрывая при этом соседние блоки – это называют переполнением блока. Такую ситуацию вы могли наблюдать, если просматривали файл примера height.html в Opera или в Mozilla (MSIE просто увеличивает размеры самого блока, игнорируя заданные автором значения).

При помощи свойства overflow можно управлять поведением браузера в случае переполнения. Оно может принимать одно из следующих значений:

visible. Содержимое будет показано полностью, возможно, поверх соседних блоков (или блок будет расширен до необходимых размеров в случае с MSIE), это значение принято по умолчанию;
hidden. Содержимое будет урезано по границам блока, пользователь не сможет увидеть его (хотя в Mozilla предусмотрен неявный механизм прокручивания при помощи курсора мышки);
scroll. Содержимое будет урезано по границам блока, и будут созданы 2 полосы прокрутки для того, чтобы пользователь мог увидеть все содержимое, причем полосы прокрутки будут в любом случае, даже если содержимое полностью умещается в отведенные размеры;
auto. Аналогично scroll, но полосы прокрутки будут созданы только в случае необходимости, причем, возможно, только горизонтальная или только вертикальная.

Рассмотрим действие этих значений на примере листинга 3.8 (см. также файл overflow.html).

Листинг 3.8. Использование width, height и overflow

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<title>Переполнение</title>
 <style type="text/css">
  div {border: solid 1px gray; background: lightgreen; float: left}
  #o1 {width: 120px; height: 100px; overflow: visible}
  #o2 {width: 120px; height: 100px; overflow: hidden}
  #o3 {width: 120px; height: 100px; overflow: scroll}
  #o4 {width: 120px; height: 100px; overflow: auto}
  #o5 {width: 120px; height: 100px; overflow: auto}
 </style>
</head>
<body>
 <div id="o1">
  Блок o1, содержимое которого явно не помещается в отведенные 120 на 100...
 </div>
 <div id="o2">
  Блок o2, содержимое которого тоже не помещается в отведенные 120 на 100...
 </div>
 <div id="o3">
  Блок o3, содержимое которого не помещается в отведенные 120 на 100...
 </div>
 <div id="o4">
  Блок o4, содержимое которого не помещается в отведенные 120 на 100...
 </div>
 <div id="o5">
  Содержимое блока o5 помещается, полос прокрутки нет.
 </div>
</body>
</html>

Если теперь просмотреть результаты в браузере, то мы увидим, что в первом случае мы видим обычный вариант – не поместившееся в границы блока содержимое было все равно отображено браузером, а во втором блоке все, что не поместилось, попросту скрыто (рис. 3.12). В третьем блоке содержимое тоже обрезано, но мы видим две полосы прокрутки, при помощи которых можно просмотреть то, что находится вне видимой области. Если прокрутить его вниз, то можно убедиться, что горизонтальная полоса прокрутки здесь не нужна, но она, тем не менее, присутствует. Зато в следующем блоке ее нет, поскольку свойство auto указывает браузеру, что полосу прокрутки надо создавать лишь при необходимости. По этой причине в последнем, пятом блоке, вообще нет полос прокрутки, поскольку все содержимое и так прекрасно помещается в отведенную область.

Рис. 3.12. Варианты усечения переполняемых блоков

Свойства overflow

Значение по умолчанию: visible.
Наследуемые значения: нет.
Применяется: к структурным и заменяемым элементам, ячейкам таблиц.
Совместимость: все. Переполнение по отдельным осям (overflow-x, overflow-y) не поддерживается в MSIE 6-7.

Усечение

Для абсолютно позиционированных блоков предусмотрено дополнительно свойство, управляющее непосредственно усечением содержимого блока – clip, которое определяет, какая часть отображаемого содержимого элемента является видимой. По умолчанию (значение auto) размер области усечения совпадает с размером блока, порожденного элементом. Если же указать конкретное значение при помощи функции rect(), то содержимое будет ограничено указанными границами:

div.clipped { position: absolute; left: 50px; top: 50px; width: 100px; height: 100px; overflow: hidden; clip: rect(10px, 90px, 90px, 10px); }

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

Следует также отметить тот факт, что свойство clip применимо только к элементам, для которых указано свойство overflow со значением, отличным от visible. Таким образом, если вы захотите использовать свойство clip, то убедитесь, что блок уже имеет не только значение position, установленное в fixed или absolute, но и overflow в hidden, auto или scroll.

ПРИМЕЧАНИЕ
В реализации этого свойства у различных программ просмотра имеются некоторые отличия. Так, Mozilla полностью скрывает содержимое вне обозначенной при помощи clip области, в то время как Opera скрывает только содержимое, но не сам блок (т.е., скажем, фон и границы останутся видимыми, если, конечно, они есть).

Свойства clip

Значение по умолчанию: auto.
Наследуемые значения: нет.
Применяется: к абсолютно позиционированным элементам.
Совместимость: Mozilla, Opera.

Видимость

Свойства overflow и clip позволяют скрыть или показать часть блока, однако для того, чтобы полностью скрыть (или наоборот, показать) блок используют другое свойство – visibility. Оно может принимать значения visible, hidden и collapse, каждое из которых применительно к этому свойству означает следующее:

visible. Блок будет видимым (принято по умолчанию);
hidden. Блок будет невидимым (полностью прозрачным), но место под него все равно будет зарезервировано;
collapse. Применяется только к строкам и столбцам таблиц (или к их группам). Делает принадлежащие к группе ячейки невидимыми, освобождая при этом занимаемое ими место;

Как правило, при использовании visibility ограничиваются всего двумя значениями этого свойства – visible и hidden, поскольку collapse, во-первых, не поддерживается MSIE, а во-вторых – иногда ведет себя довольно непоследовательно в других браузерах, особенно когда дело касается колонок.

ПРИМЕЧАНИЕ
Очевидно, что изменение видимости на практике производится при помощи сценариев, динамически изменяющих установленное для того или иного блока значение – иначе посетитель страницы так никогда и не увидит невидимые объекты.

Рассмотрим назначение видимости на следующем примере:

<div style="height: 100px; visibility: hidden;">
 Блок v1 - невидимый!
</div>
<div style="height: 100px; visibility: visible;">
 Блок v2 - видимый!
</div>

Если посмотреть такой пример в браузере, то можно увидеть, что хотя первый блок и невидим, второй начинается с отступом сверху, соответствующим установленной высоте невидимого блока, т.е. место было выделено. Если бы стояла другая задача – полностью удалить блок, то следовало бы применить другое свойство – display со значением none:

<div style="display: none;">
 Этот блок - не только невидимый, но и не занимает места!
</div>

Примеры назначения видимости, в том числе с динамическими изменениями и попыткой использования свойства collapse можно посмотреть в файле visible.html.

Свойства display

Значение по умолчанию: visible.
Наследуемые значения: да.
Применяется: ко всем элементам.
Совместимость: все.

Слои в CSS

В завершение темы позиционирования следует познакомиться с третьим измерением разметки документов. Если раньше нам встречалось позиционирование только по осям x и y (отступы с лева и сверху, ширина и высота), то теперь настало время ознакомиться с осью z.

Позиционирование объектов вдоль оси z оказывается удобным, когда визуально происходит их наложение, как это показано в листинге 3.9.

Листинг 3.9. Позиционирование по оси z

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
 <title>Слои</title>
 <style type="text/css">
  .layers {position: absolute; left: 100px; top: 100px; border: solid gray;}
 </style>
</head>
<body>
 <div class="layers" style="z-index: 1; background: #DDD;">
  Блок # 1 будет нижним среди других позиционированных по z (Z=1)
 </div>
 <div class="layers" style="z-index: 3; background: #FFF;">
  Блок # 2 расположится поверх всех остальных (Z=3)
 </div>
 <div class="layers" style="z-index: 2; background: #EEE;">
  Блок # 3 расположится между первым и вторым блоками (Z=2)
 </div>
 <div class="layers" style="background: #CCC;">
  Ну а 4-й отправится в самый низ по оси Z - даже ниже, чем первый (Z=auto)
 </div>
</body>
</html>

Здесь мы имеем 4 блока, имеющие общие начальные координаты по осям x и y (100, 100). Если бы мы не стали здесь использовать позиционирование слоев, то последовательное наложение блоков привело бы к тому, что каждый следующий блок перекрывал бы собой предыдущий, в результате чего ближе всех к пользователю оказался бы последний блок, под ним расположился бы предпоследний, и т.д. В нашем же случае, благодаря применению свойства z-index, они располагаются так: второй, третий, первый, четвертый (рис. 3.13).