и хотите, чтобы оно появилось в правой части заголовка. Если вы просто поместите изображение в кон- кретном месте в окне браузера в левой части заголовка, то рискуете потерять его из виду. Если заголовок будет перемещен, абсолютно расположенное изображение ос- танется «приклеенным» к назначенному ему месту. Вместо этого лучше определить изображение относительно тега
так, что, когда заголовок будет перемещен, изоб- ражение передвинется вместе с ним (две веб-страницы внизу рис. 15.5). Рассмотрим представленный рисунок. На верхней веб-странице видно, что круг- лая графическая кнопка помещена внутри тега
(см. рис. 15.5, вверху). На второй странице к кнопке применено абсолютное позиционирование: right: -35px; top: -35px; , которое перемещает ее за пределы области тега
и определяет в верхнем правом углу окна браузера (на самом деле кнопка находится немного за пределами окна благодаря отрицательным значениям позиционирования) (см. рис. 15.5, вто- рая страница сверху). В коде третьей веб-страницы к тегу
добавлено свойство position: relative , которое создает новую среду позиционирования для тега . Те же самые значения top и right перемещают тег к верхнему правому углу заголовка (см. рис. 15.5, третья страница сверху). Когда вы передвигаете заголовок ниже, графика также пе- редвигается (см. рис. 15.5, внизу). ПРИМЕЧАНИЕ Используйте свойство background-image (см. раздел «Добавление фоновых изображений» гл. 8), чтобы поместить изображение в фон тега
. Однако если изображение будет выше, чем тег
, или вы хотите, чтобы оно появилось за пределами границ заголовка (см. третью сверху веб- страницу на рис. 15.5), встройте изображение с помощью тега и воспользуйтесь относитель- ным позиционированием, рассматриваемым в данном разделе. Чтобы установить изображение на странице, вы могли использовать значение relative свойства position , но здесь также есть недостатки. Когда вы задаете отно- сительное позиционирование для элемента, а затем размещаете его (возможно, используя свойства left и top ), элемент перемещается на определенное расстояние от того места, где он появился бы в потоке HTML. Другими словами, он переме- щается относительно своего текущего положения. В результате на его исходном месте остается пустое пространство, где элемент находился бы без вашего позицио- нирования (см. рис. 15.1, внизу).
Глава 15. Позиционирование элементов на веб-странице 507 Рис. 15.5. Пример использования относительного позиционирования применительно к изображению Лучший способ использовать относительное расположение состоит в том, что- бы создать новую среду позиционирования для вложенных тегов. Например, тег
в примере в начале этого раздела является владельцем тега , который находится внутри него. При установке относительного позиционирования тега
любое абсолютное позиционирование, которое вы примените к тегу , будет определено относительно четырех сторон заголовка
, а не окна браузера. Код CSS выглядит следующим образом: h1 { position: relative; } h1 img { position: absolute;
508 Часть 3. Макет страницы top: 0; right: 0; } Установка свойствам top и right изображения значения 0 перемещает его в верх- ний правый угол заголовка, а не окна браузера. В CSS термин «относительный» (relative) означает не совсем то же самое, что в реальном мире. Все же, если вы хотите поместить тег относительно тега
, вашей первой мыслью может быть определение для изображения относительного позиционирования. На самом деле элемент, который вы хотите разместить, — изо- бражение — получает абсолютное позиционирование, в то время как элемент, от- носительно которого вы хотите определить изображение, — заголовок — получает значение relative . Представьте, что relative означает «относительно меня». Когда вы применяете относительное позиционирование для тега, это означает, что «все элементы, заданные внутри него, должны размещаться относительно его местопо- ложения». ПРИМЕЧАНИЕ Поскольку вы будете часто применять относительное позиционирование просто для задания новой среды расположения вложенных тегов, вам даже не нужно использовать значения top, bottom, left и right. У тега
есть свойство position: relative, но нет значений top, bottom, left и right. Наложение элементов Как вы можете видеть на рис. 15.6, абсолютно позиционированные элементы распо- ложены на переднем плане веб-страницы и могут даже находиться спереди (или сзади) других позиционированных элементов. Такое наложение определяется ин- дексом позиционного уровня (z-index). Если вы знакомы с понятием слоев в Photoshop, Fireworks или Adobe InDesign, то знаете, как работает индекс позиционного уровня: он представляет порядок, в котором элементы накладываются на верхнюю поверх- ность страницы. Когда вы используете индекс позиционного уровня, чтобы управлять порядком наложения элементов, родительские элементы определяют порядок наложения для своих детей. В двух верхних примерах на рис. 15.6 текстовый блок не позицио- нирован: он разделяет индекс позиционного уровня самой страницы непосред- ственно, для которой значение z-index равно 0 . Таким образом, кнопки в этих двух текстовых блоках накладываются поверх страницы. Однако для текстового блока в нижнем изображении задано абсолютное позиционирование с z-index , рав- ным 1000 . Тег
, содержащий текстовый блок, становится отправной точкой для укладки в него изображений. Так что, хоть z-index области
равен 1000 , его вложенные дети (с более низкими значениями z-index ) появятся сверху, в то время как сам текстовый блок находится над страницей. Чтобы сказать это другими словами, подумайте о веб-странице, как о листе бу- маги, а об абсолютно размещаемом элементе, как о записке, приклеиваемой сверху. Каждый раз, когда вы добавляете на страницу абсолютно позиционированный элемент, вы «приклеиваете» на нее записку. Конечно, если вы делаете это, то ри- скуете закрыть что-нибудь уже написанное на странице.
Глава 15. Позиционирование элементов на веб-странице 509 Рис. 15.6. Веб-страница имеет многослойную структуру Обычно порядок наложения элементов следует их порядку в HTML-коде стра- ницы. На странице с двумя абсолютно позиционированными тегами
второй тег из HTML появится выше другого тега
. Однако вы можете управлять по- рядком, в котором накладываются элементы, используя CSS-свойство z-index Свойство получает числовое значение: z-index: 3; Чем больше значение, тем ближе к вершине набора появится элемент. Скажем, у вас есть три абсолютно позиционированных изображения и части каждого из них в некоторой степени перекрываются. Изображение, имеющее больший индекс по- зиционного уровня, появится над другими (см. рис. 15.6, вверху). Когда вы меня ете индекс позиционного уровня одного или нескольких изображений, вы изменяете порядок их наложения (см. рис. 15.6, посередине). Для z-index можно даже использовать отрицательные числа, которые могут пригодиться, если нужно позиционировать элемент ниже его родительского эле- мента или любого из его предков. Например, на рис. 15.6, вверху, тег
имеет относительное позиционирование. Если нужно поместить одно из изображений за
-контейнером, можно воспользоваться отрицательным значением z-index : z-index: -1; Отрицательные значения z-index поддерживаются большинством браузеров, кро- ме Internet Explorer 7 и более ранних версий, поэтому, если нужна поддержка Internet Explorer 7, то отрицательные значения для z-index лучше вообще не использовать.
510 Часть 3. Макет страницы СОВЕТ Промежутки в значениях индекса позиционного уровня вполне допустимы. Другими словами, значения 10, 20, 30 определяют то же самое, что и 1, 2, 3. В действительности разрыв в числовых значениях дает возможность последующей вставки в набор дополнительных элементов. Если нужно обеспечить, чтобы над размещаемым элементом больше ничего не появлялось, задайте ему очень большой индекс позиционного уровня, например z-index: 10 000;. Но не переусердствуйте, поскольку максимальное значение, которое обрабатывают некоторые браузеры, равно 2 147 483 647. Скрытие частей страницы Другое CSS-свойство, часто используемое с абсолютно позиционированными эле- ментами, — свойство visibility . Оно позволяет скрыть часть страницы (или пока- зать ее). Скажем, вы хотите, чтобы над изображением внезапно появлялось всплы- вающее сообщение, когда пользователь передвигает над ним указатель мыши. Вы делаете заголовок невидимым, когда страница загружается впервые ( visibility: hidden ), и переключаетесь на режим видимости ( visibility: visible ), когда указа- тель передвигается над изображением. Значение hidden свойства visibility подобно значению none свойства display , но между ними есть существенное различие. Когда вы устанавливаете свойству display элемента значение none , он буквально исчезает со страницы, не оставляя следов. Однако задание свойству visibility значения hidden предотвращает показ браузером содержимого элемента, но оставляет пустое пространство в том месте, где должен был быть элемент. При использовании с абсолютно позиционированными элемен- тами, которые уже удаляются из потока страницы, свойства visibility: hidden и display: none ведут себя одинаково. Большинство разработчиков просто приме- няют метод display: none , и вообще не пользуются свойством visibility Есть и другой способ скрытия элемента — установка для его свойства непро- зрачности opacity нулевого значения: opacity: 0; Чтобы элемент снова появился на экране, его свойству opacity можно вернуть значение 1 : opacity: 1; Преимущество использования свойства opacity заключается в том, что это свой- ство является одним из CSS-свойств, которые браузер может анимировать. Это означает, что вы можете использовать CSS-переходы, рассмотренные в гл. 10, для анимации изменений непрозрачности. Например, элемент можно сделать постепенно появляющимся в поле зрения, изменяя его непрозрачность от 0 до 1 и добавляя переход. Самый распространенный способ переключать режим элемента от скрытого к видимому и наоборот — через JavaScript. Однако вам не нужно изучать про- граммирование на JavaScript, чтобы использовать свойство visibility (или display ). Вы можете использовать псевдокласс :hover (см. раздел «Псевдоклассы и псевдоэлементы» гл. 3), чтобы сделать невидимый элемент видимым. Предпо- ложим, например, что вам нужно поместить надпись поверх изображения, но при этом она должна появляться только при прохождении указателя мыши посети- теля над изображением (рис. 15.7). Для получения результата выполните следу- ющие дей ствия.
Глава 15. Позиционирование элементов на веб-странице 511 1. Создайте HTML-код для изображения и надписи. Один из способов предполагает использование HTML5-тегов и : A picture of a hat
Здесь к тегу применяется класс hat , поэтому стиль можно применить только к этому одному изображению. ПРИМЕЧАНИЕ Как уже упоминалось во врезке «Обходной прием. Как заставить Internet Explorer 8 понимать HTML5» в разделе «Дополнительные теги в HTML5» гл. 1, Internet Explorer 8 и более ранние версии не применяют CSS к элементам HTML5 без небольшой помощи со стороны кода JavaScript. Если вам не хочется возиться с этим кодом, можно просто воспользоваться вместо тегов и тегами
. 2. Укажите позицию для надписи. Для помещения надписи поверх изображения используется абсолютное позици- онирование. Чтобы поместить надпись относительно тега , нужно установить для его родительского тега относительное позиционирование, а также задать параметры ширины и высоты, соответствующие размерам фотографии. .hat { position: relative; width: 100px; height: 100px; } .hat figcaption { position: absolute; bottom: 0 left: 0; right: 0; background-color: white; } Надпись помещается в нижней части изображения ( bottom: 0 ). За счет установ- ки нулевых значений для его свойств left и right надпись займет всю ширину рисунка. 3. Скройте надпись. При использовании данного кода браузер покажет надпись поверх изображе- ния, но вам нужно, чтобы это происходило только при прохождении указателя чьей-либо мыши над изображением. Чтобы скрыть надпись, добавьте к стилю .hat figcaption либо visibility: hidden , либо display: none .hat figcaption { display: none; position: absolute; bottom: 0 left: 0; right: 0;
512 Часть 3. Макет страницы background-color: white; } 4. Сделайте так, чтобы надпись появлялась, когда посетитель проводит указатель мыши над изображением. Для этого воспользуйтесь псевдоклассом :hover . Нужно сделать надпись види- мой при прохождении над изображением указателя мыши посетителя. К со- жалению, нет способа создания стиля, влияющего на надпись при прохождении указателя мыши над изображением. Но так как надпись находится внутри тега , можно создать селектор потомка, влияющий на надпись при прохо- ждении указателя мыши над изображением: .hat:hover figcaption { display: block; } Этот селектор потомка предписывает следующее: «Нужно нацелиться на любой тег , который находится внутри элемента с классом hat , но только когда указатель мыши располагается над элементом». Данный селектор рабо- тает только потому, что тег figcaption является потомком элемента, над которым проходит указатель мыши. Эту идею можно использовать для создания основанных на коде CSS появля- ющихся подсказок. Чтобы ознакомиться с основным CSS-методом добавления появляющихся подсказок — дополнительной информации, возникающей при про- хождении указателя чьей-либо мыши над ссылкой, — обратитесь к сайту по адресу www.menucool.com/tooltip/css-tooltip . Есть также множество JavaScript-вариантов на выбор: полноценным и простым в использовании JavaScript-средством для созда- ния появляющихся подсказок, основанным на применении среды jQuery, является дополнительный jQuery-модуль aTip2: http://craigsworks.com/projects/qtip2/ Как уже упоминалось, для скрытия и показа элемента можно также воспользо- ваться свойством opacity , а для анимации эффекта можно воспользоваться свойством transition . Для этого можно изменить предыдущие стили следующим образом: .hat figcaption { opacity: 0; -webkit-transition: opacity .5s ease-in; -moz-transition: opacity .5s ease-in; -o-transition: opacity .5s ease-in; transition: opacity .5s ease-in; position: absolute; bottom: 0 left: 0; right: 0; background-color: white; } .hat:hover figcaption { opacity: 1; }
Глава 15. Позиционирование элементов на веб-странице 513 Это действие можно увидеть в обучающем уроке в конце главы. Но необходимо помнить, что свойство transition не работает в Internet Explorer 9 и более ранних версиях. Однако в данном случае ничего страшного не произойдет. Ваши посетите- ли все равно увидят надпись, но только без ее плавного появления и исчезновения. Рис. 15.7. Элемент с абсолютным позиционированием можно поместить над другим элементом, но скрыть его (слева), пока посетитель не наведет указатель мыши на родительский элемент (справа) Эффективные стратегии позиционирования Как говорилось в начале этой главы, если вы попытаетесь использовать CSS-пози- ционирование для размещения каждого элемента страницы, то можете столкнуть- ся с проблемой. Поскольку просто невозможно предсказать все мыслимые комби- нации браузеров и параметров настройки, используемые вашими посетителями, позиционирование под управлением CSS работает лучше всего в качестве «такти- ческого оружия». Используйте его аккуратно, чтобы обеспечить точное размеще- ние определенных элементов. Из этого раздела вы узнаете, как применять абсолютное позиционирование, чтобы добавлять маленькие, но важные детали к дизайну своей страницы, как аб- солютно позиционировать определенные элементы разметки и закреплять важные элементы страницы в одном месте, в то время как остальное содержимое будет прокручиваться. Позиционирование внутри элемента Один из самых эффективных способов использования позиционирования состоит в том, чтобы размещать маленькие элементы относительно других объектов на стра- нице. Абсолютное позиционирование может повторять тип выравнивания по пра- вому краю, которое вы задаете с плавающей разметкой. На рис. 15.8,1, дата на верх- нем заголовке кажется высоко расположенной, но с CSS вы можете переместить ее к правому краю нижнего заголовка. Чтобы поместить дату отдельно от остальной части заголовка, вам нужно заклю- чить ее в HTML-тег. Тег (см. врезку «Информация для новичков. HTML-теги
и » в разделе «Селекторы классов: точное управление» гл. 3) — рас- пространенный выбор при использовании класса для расположенного в линию текста, чтобы определить его отдельно от остальной части абзаца.
Скачать 20.28 Mb.