J Nattonal Exasperator Readers

f Cosmof-is proud to 3CIJIOUI\ce а S<!Vfngs

: opportunlty 1/rat j/011 WOR't W3C\t t\> POSS </):>. suь~:~~~~~·

} to&y for tlh>low, lov< prlt@ of$249 ..,dyou11 tкelv.e 4

Z-index: 2

Z-index: 3

Z-index: 1

Z-index: 1

Z-index: 3

Z-index: 200

; one у- wЬsqlpllon \о Ьoth ~м• (mtt<ll'llnv 6

; months of C)Cie, 4nd 611'10<\thf of the,othe<.) -----1--- z-index: 1000

L . .,_,, ...... " ...................................................... .c ....................... .......... :

Рмс. 13.6. Веб-страница имеет многослойную структуру

Чтобы сказать это другими словами, подумайте о неб-странице как о листе бумаги,

А об абсолютно размещаемом элементе - как о записке, приклеиваемой сверху.

Каждый раз, когда вы добавляете на страницу абсолютно позиционированный

элемент, вы ~приклеиваете» на нее заnиску. Конечно, если вы делаете это, то рискуете

Закрыть что-нибудь уже наnисанное на странице.

Обычно порядок наложения элементов следует их порядку в НТМL-коде страницы.

На странице с двумя абсоЛЮ'FНО позиционированными тегами <di v> второй

теr из HTML появится выше другого тега <di v>. Однако вы можете управлять порядком,

В котором накладываются элементы , используя СSS-свойство z- i ndex.

Свойство получает числовое значение:

z-index : 3:

Чем больше значение, тем ближе к вершине набора появится элемент. Скажем,

У вас есть три абсолютно позиционированных изображения и части каждого из них

Как работают свойства позиционирования 389

В некоторой степени перекрываются. Изображение, имеющее больший индекс позиционного

Уровня, появится над другими (см. рис. 13.6, вверху). Когда вы меняете