 |
Относительное позиционирование
|
|
|
|
Относительное позиционирование
Относительное позиционирование задается стилевым указанием position: relative. Блоки с относительным позиционированием позиционируются относительно нормального потока, то есть они не выпадают из нормального потока, как блоки с абсолютным позиционированием.
За начало координат принимается та точка, куда элемент был бы размещен без позиционирования. Алгоритм относительного позиционирования можно представить следующим образом: сначала браузер размещает элемент на странице, выполняя обычное форматирование, а затем, по указаниям top, left, right, bottom смещает его на заданные значения.
Откройте Пример 3, измените размер окна и убедитесь, что картинка перемещается по экрану вслед за точкой отсчета — началом абзаца, которому принадлежит тег IMG в коде документа. Начало абзаца меняет свое положение тогда, когда предшествующий заголовок записывается в одну или две экранные строки. Проанализируйте код данной web-страницы.
Фиксированное позиционирование
Фиксированное позиционирование задается стилевым указанием position: fixed. Фиксированное позиционирование позволяет закрепить блок в любом месте страницы. В отличие от абсолютного позиционирования, фиксированные элементы позиционируются только относительно окна браузера.
Откройте Пример 4, прокрутите содержимое страницы, положение навигационного меню должно остаться прежним. Проанализируйте код данной web-страницы.
Z-индекс
Стилевое свойство z-index позволяет отойти от плоского представления документа на экране. Его значением является целое число, номер плоскости, в которой будет размещаться элемент (вместе со своими потомками). Основной текст имеет нулевой уровень (z-index: 0). Положительный z-индекс размещает элементы над основным текстом, отрицательный — под ним. Из двух плоскостей размещения та расположена выше, у которой z-индекс больше.
|
|
|
Если у элементов один уровень (задан явно или не задан вовсе), то тот из них будет располагаться выше, чей HTML-код идет позже.
Cвойство z-index работает для элементов, у которых position задано как absolute, fixed или relative.
В Примере 5 представлены три блока с абсолютным позиционированием, каждый из которых перекрывает остальные. Проанализируйте код данной web-страницы.
Плавающее размещение
Плавающее размещение задается стилевым указанием float. Свойство определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон. Возможные значения: none — без обтекания; left — выравнивание по левому краю, обтекание по правому краю; right — выравнивание по правому краю, обтекание по левому краю.
В Примере 6 показано плавающее размещение изображения, в результате получен эффект обтекания изображения текстом.
| < STYLE type=text/css> img { float: right; padding: 15px; }< /STYLE> |
Очистка плавающего размещения служит для того, чтобы размещение элемента оставалось плавающим, однако его не окружали другие элементы. Свойство clear принимает следующие значения: left, right, both.
В Примере 7 показано очищенное плавающее размещение изображений, таким образом изображения были размещены в два столбца.
Задание
- Используя позиционирование, создайте объемную надпись из обычного текста (без картинок).
- Используя плавающее размещение, измените расположение текста на одной из страниц: выведите текст в три колонки (как в газете). Таблицы при этом не используйте!
Тестирование и отладка кода
Программные средства, которые позволяют исследовать поведение веб-страниц в браузере, быстро создать новый дизайн сайтов и опробовать различные методы устранения неполадок, называются по-разному для разных браузеров:
|
|
|
- Firefox — Firebug (плагин) или Инструменты разработчика (вызов Ctrl+Shift+I).
- Opera — Dragonfly (вызов Ctrl+Shift+I).
- Internet Explorer — Средства разработчика (вызов F12).
- Google Chrome — Инструменты разработчика (вызов Ctrl+Shift+I).
- Apple Safari — Веб-инспектор.
Для удобства далее будет использоваться термин " средства разработчика" вне зависимости от вида браузера.
Эти средства позволяют осуществлять:
- Удобный просмотр HTML-кода страницы (например, позволяют точно определить местонахождение тега того или иного элемента, просмотреть все «привязанные» к нему стили).
- Редактирование HTML и CSS прямо в браузере. Можно изменять атрибуты тегов и значения свойств и видеть, как меняется страница. Удобно для тех случаев, когда нужно путём экспериментов найти наиболее приемлемый вариант оформления создаваемой страницы, при этом код в html или css файле не изменится.
На левой панели отображается дерево объектной модели документа (DOM) сайта. Любой веб-документ с помощью DOM может быть представлен в виде дерева узлов, узлы могут быть связаны между собой отношениями " родительский-дочерний". Для перемещения по дереву можно использовать мышь или клавиатуру. Самый быстрый способ найти узел, соответствующий определенному элементу страницы, — использовать кнопку «Выбрать элемент щелчком». 
После выбора элемента на правой панели отображаются сведения о стиле этого элемента:
- Вкладка Правила отображает список всех правил, применяемых к выбранному элементу. Правила, применяемые в последнюю очередь, отображаются в нижней части списка; свойства, которые далее заменяются другими, перечеркиваются. Можно быстро включать и отключать свойства CSS, устанавливая или снимая флажок рядом с ними. Изменения будут сразу же отображаться на странице.
- Вкладка Блоковая модель предоставляет сведения о макете модели, такие как отступы и поля элементов, их высота и ширина, толщина границ. Эту вкладку следует применять при отладке расположения элементов.
|
|
|
