CSS - Позиционирование блочных элементов. Позиционирование

Влад Мержевич

Позиционированием называется положение элемента в системе координат. Различают четыре типа позиционирования: нормальное, абсолютное, фиксированное и относительное. В зависимости от типа, который устанавливается через свойство position , изменяется и система координат.

Благодаря комбинации свойств position , left , top , right и bottom элемент можно накладывать один на другой, выводить в точке с определёнными координатами, фиксировать в указанном месте, определить положение одного элемента относительно другого и др. Подобно другим свойствам CSS управление позиционированием доступно через скрипты. Таким образом, можно динамически изменять положение элементов без перезагрузки страницы, создавая анимацию и различные эффекты.

Нормальное позиционирование

Если для элемента свойство position не задано или его значение static , элемент выводится в потоке документа как обычно. Иными словами, элементы отображаются на странице в том порядке, как они идут в исходном коде HTML.

Свойства left , top , right , bottom если определены, игнорируются.

Абсолютное позиционирование

При абсолютном позиционировании элемент не существует в потоке документа и его положение задаётся относительно краёв браузера. Задать этот тип можно через значение absolute свойства position . Координаты указываются относительно краёв окна браузера, называемого «видимой областью» (рис. 3.42).

Рис. 3.42. Значения свойств left, right, top и bottom при абсолютном позиционировании

Для режима характерны следующие особенности.

• Ширина слоя, если она не задана явно, равна ширине контента плюс значения полей, границ и отступов.
• Слой не меняет своё исходное положение, если у него нет свойств right , left , top и bottom .
• Свойства left и top имеют более высокий приоритет по сравнению с right и bottom . Если left и right противоречат друг другу, то значение right игнорируется. То же самое касается и bottom .
• Если left задать отрицательное значение, то слой уйдёт за левый край браузера, полосы прокрутки при этом не возникнет. Это один из способов спрятать элемент от просмотра. То же относится и к свойству top , только слой уйдёт за верхний край.
• Если left задать значение больше ширины видимой области или указать right с отрицательным значением, появится горизонтальная полоса прокрутки. Подобное правило работает и с top , только речь пойдёт о вертикальной полосе прокрутки.
• Одновременно указанные свойства left и right формируют ширину слоя, но только если width не указано. Стоит добавить свойство width и значение right будет проигнорировано. Аналогично произойдёт и с высотой слоя, только уже участвуют свойства top , bottom и height .
• Элемент с абсолютным позиционированием перемещается вместе с документом при его прокрутке.

Свойство position со значением absolute можно использовать для создания эффекта фреймов. Кроме абсолютного позиционирования для элементов необходимо назначить свойство overflow со значением auto . Тогда при превышении контентом высоты видимой области появится полоса прокрутки. Высота и ширина «фреймов» формируется автоматически путём одновременного использования свойств left , right для ширины и top , bottom для высоты (пример 3.31).

Пример 3.31. Создание аналога фреймов

Абсолютное позиционирование body { margin: 0; } #sidebar, #content { position: absolute; } #sidebar, #content { overflow: auto; padding: 10px; } #header { height: 80px; /* Высота слоя */ background: #FEDFC0; border-bottom: 2px solid #7B5427; } #header h1 { padding: 20px; margin: 0; } #sidebar { width: 150px; background: #ECF5E4; border-right: 1px solid #231F20; top: 82px; /* Расстояние от верхнего края */ bottom: 0; /* Расстояние снизу */ } #content { top: 82px; /* Расстояние от верхнего края */ left: 170px; /* Расстояние от левого края */ bottom: 0; right: 0; } Плов народов мира

Плов по-фергански

Плов узбекский

Плов сибирский

Плов итальянский

Плов эстонский

Плов по-американски

Плов по-индейски

Плов по-фергански

Положить в казан нарезанное кусочками мясо и поджарить его до образования корочки. Нашинкованный кольцами лук жарить вместе с мясом до красноватого цвета, затем добавить морковь, нарезанную соломкой. Положить половину соли, всё перемешать и жарить, пока морковь не приобретёт золотисто-коричневый цвет. После этого налить половину необходимого количества воды и дать закипеть.

Засыпать ровным слоем рис, усилить огонь и тотчас налить воду, чтобы она накрыла рис на 1–1,5 см. Как только вода выпарится, плов при помощи шумовки собрать к середине горкой, проколоть палочкой в нескольких местах так, чтобы вода, находящаяся на поверхности, прошла на дно. Затем накрыть плов и дать ему упреть 20–25 мин.

Тщательно перемешайте готовый плов, переложите в большое блюдо, сверху разложите мясо.

Результат данного примера показан на рис. 3.43. Слой header выводится в потоке как обычно, а для слоёв sidebar и content установлено абсолютное позиционирование.

Рис. 3.43. Применение абсолютного позиционирования

В браузере IE6 для абсолютно позиционированных элементов нельзя одновременно задать свойства left , right и top , bottom .

Абсолютное позиционирование также применяется для создания различных эффектов, например, всплывающей подсказки к фотографиям. В отличие от атрибута title тега который также выводит текст подсказки, через стили можно управлять видом текста выводимого с помощью скрипта.

Для начала создадим пустой слой с идентификатором floatTip и определим его стиль. Обязательными должны быть три стилевых свойства - position со значением absolute , display со значением none скрывает слой и width задаёт ширину слоя с подсказкой. Остальные свойства используются по желанию разработчика и предназначены для изменения оформления слоя (пример 3.32).

Пример 3.32. Стиль для всплывающей подсказки

#floatTip { position: absolute; /* Абсолютное позиционирование */ width: 250px; /* Ширина блока */ display: none; /* Прячем от показа */ border: 1px solid #000; /* Параметры рамки */ padding: 5px; /* Поля вокруг текста */ font-family: sans-serif; /* Рубленый шрифт */ font-size: 9pt; /* Размер шрифта */ color: #333; /* Цвет текста */ background: #ECF5E4; /* Цвет фона */ }

Сам скрипт состоит из двух функций - moveTip() отслеживает движение мыши и в соответствии с координатами курсора меняет положение слоя, и toolTip() управляет видимостью слоя и выводит в нём желаемый текст (пример 3.33).

Пример 3.33. Скрипт для вывода слоя

Document.onmousemove = moveTip; function moveTip(e) { floatTipStyle = document.getElementById("floatTip").style; w = 250; // Ширина слоя // Для браузера IE if (document.all) { x = event.x + document.body.scrollLeft; y = event.y + document.body.scrollTop; // Для остальных браузеров } else { x = e.pageX; // Координата X курсора y = e.pageY; // Координата Y курсора } // Показывать слой справа от курсора if ((x + w + 10) < document.body.clientWidth) { floatTipStyle.left = x + "px"; // Показывать слой слева от курсора } else { floatTipStyle.left = x - w + "px"; } // Положение от верхнего края окна браузера floatTipStyle.top = y + 20 + "px"; } function toolTip(msg) { floatTipStyle = document.getElementById("floatTip").style; if (msg) { // Выводим текст подсказки document.getElementById("floatTip").innerHTML = msg; floatTipStyle.display = "block"; // Показываем слой } else { floatTipStyle.display = "none"; // Прячем слой } }

Для удобства и универсальности скрипт следует вынести в отдельный файл и подключать его через атрибут src тега . Окончательный код показан в примере 3.34.

Пример 3.34. Создание всплывающей подсказки

Всплывающая подсказка #floatTip { position: absolute; width: 250px; display: none; border: 1px solid #000; padding: 5px; font-family: sans-serif; font-size: 9pt; color: #333; background: #ECF5E4; opacity: 0.85; /* Прозрачность слоя */ }

" + "Объектив: Canon EF 24-105 f/4L IS USM
" + "Вспышка: Canon Speedlite 580 EX
" + "Выдержка: 1/125
Диафрагма: 5.6")" onmouseout="toolTip()" />

Результат данного примера показан на рис. 3.44. Обратите внимание, что переносы текста при вызове функции toolTip() сделаны для удобства восприятия и имеют синтаксис JavaScript. В Safari скрипт иногда не работает при переносе текста, в этом случае текст следует записать в одну строку. К стилям добавлено свойство CSS3 opacity , которое добавляет для слоя небольшую прозрачность. В IE до версии 9.0 это свойство не поддерживается.

Рис. 3.44. Всплывающая подсказка, выводимая с помощью JavaScript

Фиксированное положение

Фиксированное положение слоя задаётся значением fixed свойства position и по своему действию похоже на абсолютное позиционирование. Но в отличие от него привязывается к указанной свойствами left , top , right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы. Ещё одна разница от absolute заключается в том, что при выходе фиксированного слоя за пределы видимой области справа или снизу от неё, не возникает полос прокрутки.

Применяется такой тип позиционирования для создания меню, вкладок, заголовков, в общем, любых элементов, которые должны быть закреплены на странице и всегда видны посетителю. В примере 3.35 показано добавление подвала, который остаётся на одном месте независимо от объёма информации на сайте.

Пример 3.35. Фиксированный подвал

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Фиксированный подвал BODY { margin-bottom: 50px; } #footer { position: fixed; /* Фиксированное положение */ left: 0; bottom: 0; /* Левый нижний угол */ padding: 10px; /* Поля вокруг текста */ background: #39b54a; /* Цвет фона */ color: #fff; /* Цвет текста */ width: 100%; /* Ширина слоя */ } Все перечисленные на сайте методы ловли льва являются теоретическими и базируются на вычислительных методах. Автор не гарантируют вашей безопасности при их использовании и снимает с себя всякую ответственность за результат. Помните, лев это хищник и опасное животное! Влад Мержевич

Результат примера показан на рис. 3.45. Поскольку фиксированный подвал накладывается на текст и скрывает его, добавлен отступ снизу для селектора BODY . Браузер IE6 не поддерживает значение fixed , поэтому в нём данный пример будет работать некорректно.

Рис. 3.45. Подвал внизу страницы

Относительное позиционирование

Если задать значение relative свойства position , то положение элемента устанавливается относительно его исходного места. Добавление свойств left , top , right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения. Положительное значение left определяет сдвиг вправо от левой границы элемента, отрицательное - сдвиг влево. Положительное значение top задаёт сдвиг элемента вниз (рис. 3.46), отрицательное - сдвиг вверх.

Рис. 3.46. Значения свойств left и top при относительном позиционировании

Свойства bottom и right производят обратный эффект. При положительном значении right сдвигает элемент влево от его правого края, при отрицательном - сдвигает вправо (рис. 3.47). При положительном значении bottom элемент поднимается вверх, при отрицательном опускается вниз.

Рис. 3.47. Значения свойств right и bottom при относительном позиционировании

Для относительного позиционирования характерны следующие особенности.

• Этот тип позиционирования не применим к элементам таблицы вроде ячеек, строк, колонок и др.
• При смещении элемента относительно исходного положения, место, которое занимал элемент, остаётся пустым и не заполняется ниже или вышележащими элементами.

В примере 3.36 показан сдвиг текста заголовка вниз для придания ему особого стиля написания.

Пример 3.36. Заголовок текста

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Заголовок H1 { font: bold 2em Arial, Tahome, sans-serif; /* Параметры шрифта */ color: #fff; background: #375D4C; padding: 0 10px; } H1 SPAN { position: relative; /* Относительное позиционирование */ top: 0.3em; /* Сдвигаем вниз */ } Аз и буки шрифтовой науки

Шрифт это средство выражения дизайна, а не какого-то банального чтения.

Результат данного примера показан на рис. 3.48.

Рис. 3.48. Сдвиг текста относительно исходного положения

Вложенные слои

Обычно относительное позиционирование само по себе применяется не часто, поскольку есть ряд свойств выполняющих фактически ту же роль, к примеру, тот же margin . Но сочетание разных типов позиционирования для вложенных слоёв является одним из удобных и практичных приёмов вёрстки. Если для родительского элемента задать relative , а для дочернего absolute , то произойдёт смена системы координат и положение дочернего элемента при этом указывается относительно его родителя (рис. 3.49).

Рис. 3.49. Значения свойств left, right, top и bottom во вложенных слоях

Отсчёт координат ведётся от внутреннего края границы, значения полей не учитываются. В следующем примере текст располагается в правом нижнем углу слоя возле границы, игнорируя свойство padding .

Текст ... ...

Ни один из этих вариантов не является совершенным, но они полезны. Я склоняюсь в пользу применения комментариев для лучшей организации, но какой вариант вы выберете полностью зависит от вас.

Создание многократно используемых макетов

При создании сайта всегда лучше написать модульные стили, которые могут быть повторно задействованы в других местах, а многократно используемые макеты находятся в верхней части списка повторно применяемого кода. Макеты могут быть созданы с помощью float или строчно-блочных элементов, но что работает лучше и почему?

Вопрос что лучше для структуры страницы - обтекаемые или строчно-блочные элементы открыт для обсуждения. Мой подход заключается в использовании строчно-блочных элементов для создания сетки или макета страницы, а затем задействовать float , когда мне хочется чтобы контент обтекал вокруг данного элемента (для чего float и были предназначены при работе с изображениями). Вообще, я также считаю, что со строчно-блочными элементами легче работать.

Тем не менее, используйте то, что работает лучше для вас. Если с одним подходом вы знакомы лучше чем с другим, тогда задействуйте его.

В настоящее время в работе появились новые спецификации CSS - в частности, свойства flex- и grid-, которые помогут решить, как лучше всего сверстать страницы. Следите за этими методами, когда они начнут всплывать.

На практике

С твёрдым пониманием многократно используемых макетов, пришло время внедрить один на наш сайт Styles Conference.

Для сайта Styles Conference мы создадим трёхколоночный макет используя строчно-блочные элементы. Мы сделаем это так, чтобы получить три колонки одинаковой ширины или две колонки с общей шириной, разделённой между ними как 2/3 для одной и 1/3 для другой.

Для начала мы создадим классы, определяющие ширину этих колонок. Эти два класса мы назовём col-1-3 для одной трети и col-2-3 для двух третей. В разделе «Сетка» нашего файла main.css перейдём вперед и определим эти классы и соответствующую им ширину.

Col-1-3 { width: 33.33%; } .col-2-3 { width: 66.66%; }

Мы хотим чтобы обе колонки отображались как строчно-блочные элементы. Нам также надо убедиться, что вертикальное выравнивание у них задано по верхней части каждой колонки.

Давайте создадим два новых селектора, которые совместно будут использовать display и vertical-align .

Col-1-3, .col-2-3 { display: inline-block; vertical-align: top; }

Взгляните на CSS снова. Мы создали два селектора класса col-1-3 и col-2-3 разделённых запятой. Запятая в конце первого селектора означает, что за ней следует другой селектор. После второго селектора идёт открывающая фигурная скобка, которая сообщает что начинается описание стиля. С помощью запятой разделяющей селекторы мы можем привязать один стиль к нескольким селекторам одновременно.

Мы хотим поместить некоторое пространство между колонок, которое поможет разбить содержимое. Это можно сделать, добавив горизонтальный padding к каждой колонке.

Это хорошо работает, однако, когда две колонки располагаются рядом друг с другом, ширина пространства между ними будет вдвое больше, чем пространство от внешнего края. Чтобы уравновесить это, мы поместим все наши колонки в сетку и добавим к ней тот же padding .

Давайте воспользуемся классом grid , чтобы определить нашу сетку, а затем зададим одинаковый горизонтальный padding для классов grid , col-1-3 и col-2-3 . С запятыми, снова разделяющих наши селекторы, наш CSS выглядит следующим образом:

Grid, .col-1-3, .col-2-3 { padding-left: 15px; padding-right: 15px; }

Когда мы устанавливаем горизонтальный padding , нам нужно быть осторожными. Помните, в прошлом уроке мы создали контейнер с классом container по центру всего нашего контента на странице с шириной 960 пикселей. В данный момент, если бы мы поставили элемент с классом grid внутрь элемента с классом container , то их горизонтальные padding сложились бы вместе и наши колонки не будут отображаться пропорционально ширине остальной части страницы.

Мы осуществим это, разбивая набор старых правил container на следующее:

Container, .grid { margin: 0 auto; width: 960px; } .container { padding-left: 30px; padding-right: 30px; }

Теперь любой элемент с классом container или grid будет 960 пикселей в ширину и располагаться по центру страницы. Кроме того, мы сохранили существующий горизонтальный padding для любого элемента с классом container путём перемещения его в новый, отдельный набор правил.

Хорошо, всю тяжёлую необходимую часть по настройке сетки завершили. Теперь пришло время для работы с нашим HTML и просмотра, как эти классы действуют.

Мы начнём с тизеров на главной странице, в файле index.html, выровняв их по трём колонкам. В настоящее время тизеры обёрнуты элементом с классом container . Мы хотим изменить класс container на grid так, чтобы внутри мы могли начать размещение колонок.

...

... ... ...

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

... ... ...

Для проверки - в строке 3 мы оставили комментарий, идентифицирующий раздел «Спикеры», который за ним следует. В конце строки 7 мы открываем комментарий сразу после закрывающего тега . Внутри этого комментария, в строке 9 мы определяем следующий раздел «Расписание». Затем закрываем комментарий в начале строки 11, сразу перед открывающим тегом . Аналогичная структура комментариев появляется в строках с 13 до 17 между двумя элементами , прямо перед разделом «Место проведения». В целом, мы закомментировали любое потенциальное пустое пространство между колонок, одновременно используя те же комментарии для идентификации наших разделов.

Теперь у нас есть повторно используемая трёхколоночная сетка, которая поддерживает разные расстановки, с использованием ширины колонок как 1/3 и 2/3. Наша главная страница теперь содержит три колонки, разделяя все тизеры.

Рис. 5.02. Главная страница Styles Conference теперь включает трёхколоночный макет

Демонстрация и исходный код

Ниже вы можете просмотреть сайт Styles Conference в его нынешнем состоянии, а также скачать исходный код сайта на данный момент.

Уникальное позиционирование элементов

Рано или поздно каждый пожелает точно позиционировать элемент, но float или строчно-блочные элементы не позволяют проделать такой трюк. Обтекаемые элементы, которые удаляют элемент из потока страницы, часто приводят к нежелательным результатам, поскольку окружающие элементы обтекают вокруг элемента с float . Строчно-блочные элементы, если только мы не создаём колонки, могут быть довольно неудобны, когда дело касается правильного положения. Для подобных ситуаций мы можем использовать свойство position в сочетании со свойствами смещения блока.

Свойство position определяет, как элемент позиционируется на странице и будет ли он отображаться в обычном потоке документа. Оно применяется в сочетании со свойствами смещения блока - top , right , bottom и left , которые точно определяют, где элемент будет расположен путём перемещения элемента в разных направлениях.

По умолчанию у каждого элемента значение position установлено как static , это означает, что элемент существует в обычном потоке документа и не принимает какие-либо свойства для его смещения. Значение static наиболее часто переписывается значением relative или absolute , которые мы рассмотрим дальше.

Относительное позиционирование

Значение relative для свойства position позволяет элементам отображаться в обычном потоке страницы, резервируя место для элемента как предполагалось и не позволяя другим элементам его обтекать. Однако, оно также позволяет модифицировать положение элемента с помощью свойств смещения. К примеру, рассмотрим следующие HTML и CSS:

... ... ...

Div { height: 100px; width: 100px; } .offset { left: 20px; position: relative; top: 20px; }

Демонстрация относительного позиционирования

Здесь для второго элемента с классом offset задано значение position как relative , а также два свойства смещения - left и top . Это сохраняет исходное положение элемента и другим элементам не разрешено двигаться в эту область. Кроме того, свойства смещения перемещают элемент, выталкивая его на 20 пикселей от левого и на 20 пикселей от верхнего исходного местоположения.

Для относительно позиционированных элементов важно знать, что свойства смещения блока определяют, куда элемент будет перемещён, учитывая его исходное положение. Таким образом, свойство left со значением 20 пикселей фактически толкает элемент вправо на 20 пикселей. Свойство top со значением 20 пикселей затем будет толкать элемент вниз на 20 пикселей.

Когда мы позиционируем элемент с помощью свойств смещения, элемент перекрывает элемент под ним, а не сдвигает его вниз, как это делают свойства margin или padding .

Абсолютное позиционирование

Значение absolute для свойства position отличается от значения relative тем, что элемент с абсолютным позиционированием не появляется в обычном потоке документа, исходное пространство и положение абсолютно позиционируемого элемента не резервируется.

Кроме того, абсолютно позиционируемые элементы перемещаются относительно их ближайшего относительно позиционированного родительского элемента. Если относительно позиционированного родителя не существует, то абсолютно позиционированный элемент будет позиционироваться относительно элемента . Это небольшая часть информации; давайте взглянем на то, как это работает внутри некоторого кода:

...

Section { position: relative; } div { position: absolute; right: 20px; top: 20px; }

Демонстрация абсолютного позиционирования

В этом примере элемент позиционируется относительно, но не включает каких-либо свойств смещения. Следовательно, его положение не меняется. Элемент с классом offset включает значение position как absolute . Поскольку элемент является ближайшим относительно позиционированным родительским элементом для , то элемент будет позиционироваться относительно элемента .

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

В результате свойств right и top , элемент появится в 20 пикселях справа и 20 пикселях сверху внутри .

Поскольку элемент позиционируются абсолютно, он не располагается в обычном потоке страницы и будет перекрывать любые окружающие его элементы. Кроме того, исходное положение не сохраняется и другие элементы могут занять это место. Как правило, большая часть позиционирования может происходить без применения свойств position и свойств смещения, но в некоторых случаях они могут оказаться чрезвычайно полезны.

Резюме

Изучение позиционирования содержимого в HTML и CSS является огромным шагом в сторону освоения этих языков. Добавьте к этому блочную модель и вот мы уверенно движемся по пути превращения во фронтенд-разработчиков.

Блочный элемент в HTML –это такой элемент, который занимает по умолчанию всю ширину родительского элемента. Родительским элементом может быть другой блочный элемент, или окно браузера. Блочному элементу с помощью свойств CSS можно задать ширину (width) и высоту (height). Позиционированием блочных элементов называется процесс их расположения внутри окна браузера и относительного друга с помощью CSS свойств position , left , top , right и bottom . Свойство CSS position предназначено для задания одного из четырёх доступных видов позиционирования: static (по умолчанию), absolute (абсолютное), fixed (фиксированное) и relative (относительное). Остальные CSS свойства, а именно left , top , right и bottom предназначены для задания расстояний относительно левого, верхнего, правого и нижнего края родительского элемента. Также блочные элементы при задании определенных свойств могут накладываться друг друга, и данную возможность то же можно использовать на сайтах.

Позиционирование по умолчанию (static)

Если вы не указали position у блочного элемента или указали static , что одно и то же, то в таком случае блочные элементы располагаются по порядку. Причем следующий блок (например: красный) располагается с новой строки. Так же на данное позиционирование не действует задание расстояний left , top , right и bottom .

Абсолютное позиционирование (absolute)

При абсолютном позиционировании положения элемента задаётся относительно краёв окна браузера с помощью расстояний, задаваемых свойствами left , top , right и bottom . Если указать расстояния left и right одновременно, и они будут противоречить между собой, то предпочтение отдаётся left , то же самое касается top и bottom , в которых больший приоритет имеет расстояние top . Абсолютное позиционирование применяется очень часто совместно с относительным позиционированием в дизайнерских целях, когда необходимо разместить различные элементы относительного друг друга, так же может применяться для создания выпадающих меню, разметки сайта и т.д.

Фиксированное позиционирование (fixed)

Фиксированное позиционирование отличается от других видов позиционирования и не перемещается вместе с контентом при скроллинге страницы. Блочные элементы с фиксированным позиционированием привязываются с помощью свойств left , top , right и bottom к краям окна браузера. Фиксированное позиционирование применяется для создания фреймовых интерфейсов (окно браузера делится на несколько областей), фиксированного меню, фиксированного подвала сайта и "постоянных" блоков (перечень ссылок, социальные кнопки и т.д.).

Относительное позиционирование (relative)

Относительное позиционирование задаётся с помощью задания расстояний left , top , right и bottom относительно его текущего положения.

Однако такое положение блока можно создать и с помощью свойства margin (отступы).

Относительное позиционирование не интересно использовать само по себе, оно в основном применяется вместе с абсолютным позиционированием.

Рассмотрим варианты:

Выше мы говорили о том, что позиционировать элементы страницы можно путем использования таблиц. Но это же можно делать и с помощью стилей. Среди параметров стиля имеются специальные свойства для позиционирования:

• left - для задания расстояния в пикселах от левого края окна (х-координата);
• top - для задания расстояния в пикселах от верхнего края окна (у-координата);
• z-index - для указания порядка, в котором элементы будут перекрывать друг друга; это новое измерение, элементы с большим z-индексом будут появляться над элементами с меньшим z-индексом.

Конечно, при использовании этих трех свойств не создается эффект трехмерного пространства, но это уже нечто большее, чем плоская поверхность. В этом случае говорят о 2,5-мерном пространстве.
Кроме свойств-координат, нам понадобится свойство роsition , которое в сочетании со свойствами left и top позволяет устанавливать элементы в определенные позиции окна. Свойство position может принимать три значения:

• absolute - заданные свойства left и top поставят элемент в точку с координатами х и у относительно верхнего левого угла контейнера (объекта, содержащего данный элемент). Если они определены для элемента вне контейнера, то началом отсчета координат будет верхний левый угол страницы. Заметим, что положение элемента не зависит от положения его тега внутри HTML-документа;
• relative - элемент будет установлен в соответствии с тем, в каком месте исходного текста он находится; это значение установлено по умолчанию. Например, если элемент находится в трех строках от начала его выделения в тексте документа, то по умолчанию считается, что свойство позиционирования имеет значение relative , а свойства координат left и top - нулевые значения. Ненулевые значения свойств left и top задают сдвиг элемента относительно исходного положения;
• static - элемент будет поставлен в некоторое положение относительно фона и не будет перемещаться при прокручивании страницы.

Следующий пример показывает использование свойства z-index . Хотя в тексте программы картинка описана выше остальных элементов, за счет присвоения ей индекса с большим номером происходит перемещение ее поверх первого текста. Таким образом, использование свойства z-index освобождает от пут естественного порядка упоминания элементов в тексте HTML-программы.

Позиционирование




nepBbiu позиционированный текст

Рис. 666. Использование свойства i-index позволяет изменить естественный порядок следования элементов в тексте HTML-документа

При позиционировании элементов может оказаться, что размеры элемента превосходят размеры фрагмента (отводимой области, заданной в нашем примере тегом ). Например, текст или картинка не помещаются полностью в прямоугольник, выделенный для них. На этот случай имеется свойство overwlow (переполнение). Свойство overflow может иметь три значения:

• nоnе (ничего) - если элемент и выйдет за пределы фрагмента (отведенного для него места), он все равно будет показан;
• clip - выступающие за границы фрагмента части элемента будут обрезаны;
• scroll - будет использована прокрутка.

В следующем примере используется свойство overflow для создания механизма прокрутки первого текста.

Позиционирование




riepBbiM позиционированный текст

Второй позиционированный текст

Рис. 667. Механизм прокрутки текста, реализованный с помощью свойства overflow

Конечно, неказистые страницы с предыдущих рисунков создавались лишь с целью продемонстрировать возможности языка по позиционированию элементов. Вы сами решите, какие средства и для чего будете использовать на своей Web-странице.

С помощью свойств позиционирования нетрудно создавать для надписей эффект трехмерности. Идея состоит в том, чтобы вывести одинаковые по содержанию тексты слегка сдвинутыми друг относительно друга и окрашенными в различные цвета. Попробуйте в качестве упражнения написать соответствующую программу. На рисунке показано примерно то, что должно получиться. Ниже рисунка приведен один из возможных вариантов программы, которая создает «трехмерную» надпись.

Рис. 668. Пример создания трехмерного текста с помощью CSS

3d эффект

P (font-family: "sans-serif"; font-size: 96, -color: red)
P. highlight (color: silver }
P. shadow (color: darkred}

Объемный текст"

Oбъeмный текст

Объемный текст

Обратите внимание, что этот способ создания эффектных заголовков значительно экономнее, чем использование графических файлов с аналогичным содержанием.

Последнее обновление: 28.04.2016

CSS предоставляет возможности по позиционированию элемента, то есть мы можем поместить элемент в определенное место на странице

Основным свойством, которые управляют позиционированием в CSS, является свойство position . Это свойство может принимать одно из следующих значений:

static : стандартное позиционирование элемента, значение по умолчанию

absolute : элемент позиционируется относительно границ элемента-контейнера, если у того свойство position не равно static

relative : элемент позиционируется относительно его позиции по умолчанию. Как правило, основная цель относительного позиционирования заключается не в том, чтобы переместить элемент, а в том, чтобы установить новую точку привязки для абсолютного позиционированния вложенных в него элементов

fixed : элемент позиционируется относительно окна бразуера, это позволяет создать фиксированные элементы, которые не меняют положения при прокрутке

Не следует одновременно применять к элементу свойство float и любой тип позиционирования, кроме static (то есть тип по умолчанию).

Абсолютное позиционирование

Область просмотра браузера имеет верхний, нижний, правый и левый края. Для каждого из этих четырех краев есть соответствующее свойство CSS: left (отступ от края слева), right (отступ от края справа), top (отступ от края контейнера сверху) и bottom (отступ снизу). Значения этих свойств указываются в пикселях, em или процентах. Необязательно задавать значения для всех четырех сторон. Как правило, устанавливают только два значения - отступ от верхнего края top и отступ от левого края left.

Блочная верстка в HTML5 .header { position: absolute; left: 100px; top: 50px; width: 430px; height: 100px; background-color: rgba(128, 0, 0, 0.5); }

HELLO WORLD

Здесь элемент div с абсолютным позиционированием будет находиться на 100 пикселей слева от границы области просмотра и на 50 снизу.

При этом не столь важно, что после этого элемента div идут какие-то другие элементы. Данный блок div в любом случае будет позиционироваться относительно границ области просмотра браузера.

Если элемент с абсоютным позиционированием располагается в другом контейнере, у которого в свою очередь значение свойства position не равно static , то элемент позиционируется относительно границ контейнера:

Позиционирование в HTML5 .outer { position: absolute; left: 80px; top: 40px; width: 430px; height: 100px; border: 1px solid #ccc; } .inner{ position: absolute; left: 80px; top: 40px; width: 50px; height: 50px; background-color: rgba(128, 0, 0, 0.5); }

Относительное позиционирование

Относительное позиционирование также задается с помощью значения relative . Для указания конкретной позиции, на которую сдвигается элемент, применяются те же свойства top, left, right, bottom:

Позиционирование в HTML5 .outer { position: relative; left: 80px; top: 40px; width: 300px; height: 100px; border: 1px solid #ccc; } .inner{ position: absolute; left: 80px; top: 40px; width: 50px; height: 50px; background-color: rgba(128, 0, 0, 0.5); }

Свойство z-index

По умолчанию при совпадении у двух элементов границ, поверх другого отображается тот элемент, который определен в разметке html последним. Однако свойство z-index позволяет изменить порядок следования элементов при их наложении. В качестве значения свойство принимает число. Элементы с большим значением этого свойства будут отображаться поверх элементов с меньшим значением z-index.

Например:

Позиционирование в HTML5 body{ margin:0; padding:0; } .content{ position: relative; top: 15px; left: 20px; width: 250px; height: 180px; background-color: #eee; border: 1px solid #ccc; } .redBlock{ position: absolute; top: 20px; left:50px; width: 80px; height: 80px; background-color: red; } .blueBlock{ position: absolute; top: 80px; left: 80px; width: 80px; height: 80px; background-color: blue; }

Теперь добавим к стилю блока redBlock новое правило:

RedBlock{ z-index: 100; position: absolute; top: 20px; left:50px; width: 80px; height: 80px; background-color: red; }

Здесь z-index равен 100. Но это необязательно должно быть число 100. Так как у второго блока z-index не определен и фактически равен нулю, то для redBlock мы можем установить у свойства z-index любое значение больше нуля.

И теперь первый блок будет накладываться на второй, а не наоборот, как было в начале.