|
Позиционирование и z-индекс
Задание 3. Стойкий оловянный солдатик
Создайте страницу, вид которой показан на рисунке:
Решение запишите в виде файла task03.htm в каталог,
который вам укажет учитель. В этом каталоге есть подкаталог
pic, в котором содержатся нужные картинки.
В качестве средств оформления используйте свойства, приведённые в таблице.
| Свойство |
Описание и значения |
| position |
Задаёт тип позиции блока в окне.
Значением является ключевое слово:
absolute (блок с абсолютными координатами),
relative (блок с относительными координатами),
static (действуют обычные правила размещения блока).
|
| left |
Расстояние элемента от левого края содержащего его блока.
Значения: число с допустимой единицей измерения (например, px).
Можно записывать значение в виде процента от родительского элемента.
|
| top |
Расстояние элемента от верхнего края содержащего его блока.
Значения: число с допустимой единицей измерения (например, px).
Можно записывать значение в виде процента от родительского элемента.
|
| right |
Расстояние элемента от правого края содержащего его блока.
Значения: число с допустимой единицей измерения (например, px).
Можно записывать значение в виде процента от родительского элемента.
|
| bottom |
Расстояние элемента от нижнего края содержащего его блока.
Значения: число с допустимой единицей измерения (например, px).
Можно записывать значение в виде процента от родительского элемента.
|
| z-index |
Указывает в каком порядке элементы будут перекрывать друг друга.
Элементы с более высоким z-индексом будут располагаться “выше”
элементов с более низким.
|
В качестве текстового редактора используйте PSPad или Блокнот.
Заготовки можно копировать в текстовый редактор через буфер обмена.
Файл task03.htm
|
