Контрольные вопросы:
Что такое «позиционирование»?
Каким свойством CSS задается позиционирование элемента? Какие значения может принимать это свойство?
Какими стилевыми указаниями задаются координаты элемента в окне браузера?
Приведите свой пример алгоритма, по которому выполняется абсолютное позиционирование.
Приведите свой пример, по которому выполняется относительное позиционирование.
Расскажите алгоритм выполнения смешанного позиционирования по схеме absolute [relative].
Приведите свой пример выполнения смешанного позиционирования по схеме relative [absolute].
Приведите свой пример выполнения смешанного позиционирования по схеме absolute [absolute].
9. Приведите свой пример выполнения смешанного позиционирования по схеме relative [relative].
10. Приведите свой пример вывода на экран элементов, обладающих стилевым свойством z-index.
Задания
1. Создайте страницу, в которой одна и та же картинка выводится несколько раз со смещением вниз и вправо так, чтобы каждая следующая копия была выше предыдущей (рис. 9.16).
Рис. 9.16. Схема задания 1
2. Создайте страницу, в которой одна и та же картинка выводится несколько раз со смещением вниз и вправо так, чтобы каждая следующая копия была ниже предыдущей (рис. 9.17).
Рис. 9.17. Схема задания 2
3. Стилевое свойство overflow используется для определения того, что случится, если содержимое элемента выйдет за пределы заданной области. Среди предписываемых стандартом значений нормально работает только scroll — содержимое прокручивается. Напишите страничку, которая демонстрирует работу свойства overflow (рис. 9.18).
Рис. 9.18. Схема задания 3
4. Иван Мячиков решил задать для текстового блока на своей странице широкое левое поле. Он поместил блок внутрь конструкции
<DIV style="position: relative; lef t: 100; ">
…
</DIV>
Поле получилось, но текст перестал форматироваться по правой границе окна. Помогите Мячикову исправить положение (рис. 9.19).
Рис. 9.19. Иллюстрация к заданию 4
5. Если у абсолютно позиционированного элемента опущена одна или две координаты,то:
если не задано свойство left, левый край элемента будет располагаться справа за элементом-родителем;
если не задано свойство top, верхний край элемента будет располагаться ниже элемента-родителя. При этом если родитель позиционирован относительно, то элемент будет располагаться по вертикали там, где он располагался бы, если вообще не был бы позиционирован.
Используя описанные особенности, создайте страничку с левым полем, в котором бы располагался маркер, указывающий на ошибочное слово в строке. При этом если из-за изменения размера окна ошибочное слово переместится в другую строку, маркер должен автоматически следовать за ним (рис. 9.20).