Свойство left – используется для задания в пикселях расстояния от левого края окна (или экрана), на котором находится элемент.
Свойство top – используется для задания в пикселях расстояния от верхнего края окна (или экрана), на котором находится элемент.
Свойство z-index – добавляет новое измерение (или, если точнее, ряд слоев) на страницу. Максимум, что может сделать введение этого свойства,– это указать, в каком порядке элементы будут перекрывать друг друга. Элемент с более высоким z-индексом будет появляться над элементом с более низким.
Свойство position – позволяет ставить элементы в определенные позиции внутри окна браузера в сочетании со свойствами left и top.
absolute – означает, что заданные свойства left и top поставят элемент в место с координатами x и y относительно левого верхнего угла страницы;
relative – означает, что элемент будет поставлен в соответствие с тем, в каком месте исходного текста он находится;
static – означает, что элемент будет поставлен в некоторое положение относительно фона, но не будет двигаться при прокручивании страницы;
Свойство overflow – используется для определения того, что случится, если ширина или высота элемента внутри фрагмента выйдут за пределы области последнего. Это свойство может иметь три значения:
none (ничего) – означает, что если элемент выйдет за пределы своего фрагмента, то он все равно будет изображен (например, часть текста, для которой не хватило место в своей полосе, «вылезет» за ее пределы);
clip – означает, что выступающие части элемента будут обрезаны;
scroll – означает, что будет использован механизм прокрутки.
Свойство visibility – определяет, будет ли элемент виден на странице. Это свойство может иметь два значения:
visible – элемент виден;
hidden – элемент на виден.
Задания:
1. Создание простого трехмерного эффекта:
2. Создать новый документ (назвать по своему усмотрению), в котором расположить три абзаца, состоящих из одного слова «Привет».
3. Описать класс: позиционирование – абсолютное, расстояние от левого и верхнего края – 100, z-index – 1, цвет текста – красный, размер текста – 100. Применить данный класс для первого абзаца.
4. Описать класс: позиционирование – абсолютное, расстояние от левого и верхнего края – 105, z-index – 2, цвет текста – желтый, размер текста – 100. Применить данный класс для второго абзаца.
5. Описать класс: позиционирование – абсолютное, расстояние от левого и верхнего края – 110, z-index – 3, цвет текста – зеленый, размер текста – 100. Применить данный класс для третьего абзаца.
6. Сохранить документ и просмотреть в браузере.
7. Поменять местами значения z-index у второго и третьего класса и просмотреть результат.
8. Поменять обратно местами значения z-index у второго и третьего класса.
9. Спрятать третий абзац и просмотреть результат.
10. Самостоятельно: используя графический редактор, нарисовать шедевр. Добавить картинку в документ и сделать подписи к частям рисунка, используя изученные свойства.
