Главная | Обратная связь | Поможем написать вашу работу!
МегаЛекции

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




Если задать значение 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. Заголовок текста

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Заголовок</title> <style type="text/css"> H1 { font: bold 2em Arial, Tahome, sans-serif; /* Параметры шрифта */ color: #fff; background: #375D4C; padding: 0 10px; } H1 SPAN { position: relative; /* Относительное позиционирование */ top: 0.3em; /* Сдвигаем вниз */ } </style> </head> <body> <h1><span>Аз и буки шрифтовой науки</span></h1> <p>Шрифт это средство выражения дизайна, а не какого-то банального чтения.</p> </body></html>

 

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

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

Поток документа

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

 

Использование position

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

 

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Фиксированный слой</title> <style type="text/css"> BODY { margin-left: 90px; /* Отступ слева */ }.feedback { position: fixed; /* Фиксированное положение */ left: 0; top: 50%; /* Положение */ background: #fc0; /* Цвет фона */ width: 70px; /* Ширина слоя */ padding: 5px; /* Поля */ } </style> </head> <body> <p>Я вновь увидел Теночтитлан, великолепные покои во дворце Монтесумы и себя самого, спящего на золотом ложе. Я знал, что я бог Тескатлипока и наутро меня принесут в жертву. Я спал, измученный я удрученный, и видел сон. Я видел во сне, будто стою на том самом месте, где стоял сейчас, и запах наших цветов щекочет мне ноздри, как в эту ночь, и сладкие соловьиные песни звучат точно так же, как звучали они в моих ушах. Мне снилось, что, пока я стоял и слушал соловьев, над зелеными кронами дубов и ясеней взошла луна, — вот, вот она уже сияет в небесах. Мне снилось, что чей-то голос запел за холмом, но тут я пробудился от давно забытых видений прошлого.</p> <div class="feedback">Оставить<br />отзыв</div> </body></html>

 

Результат данного примера показан на рис. 3.20. Чтобы текст не накладывался на слой, добавлен отступ слева. Из-за того что слой feedback не существует в потоке документа, он может располагаться в любом месте кода, в данном случае внизу.

 

Рис. 3.20. Фиксированный слой

 

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

  1. Родитель отсутствует (его роль выполняет <body>) или у родителя не задано свойство position.
  2. У родителя элемента установлено свойство position в значении absolute или relative.

В первом случае все просто, элемент ведет себя как в примере 3.10, за исключением того, что не закрепляется строго на одном месте, а может прокручиваться одновременно со страницей. Во втором варианте положение элемента задаётся относительно родителя.

В примере 3.11 создаётся два вложенных слоя с абсолютным позиционированием. Координаты первого слоя layer1 задаются относительно окна браузера, координаты второго слоя layer2 относительно границ слоя layer1.

 

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Позиционирование</title> <style type="text/css">.layer1 { width: 217px; /* Ширина слоя */ height: 512px; /* Высота слоя */ background: url(images/bg2.png) no-repeat; /* Фоновая картинка */ position: absolute; /* Абсолютное позиционирование */ right: 20%; /* Положение справа */ bottom: 0; /* Положение снизу */ }.layer2 { background: #000; /* Цвет фона для IE */ background: rgba(0,0,0, 0.5); /* Цвет фона с полупрозрачностью */ color: #fff; /* Цвет текста */ position: absolute; /* Абсолютное позиционирование */ bottom: 30px; /* Положение снизу */ width: 207px; /* Ширина слоя */ padding: 5px; /* Поля */ } </style> </head> <body> <div class="layer1"> <div class="layer2"> Позвоночник человека </div> </div> </body></html>

 

Результат данного примера показан на рис. 3.21. Браузер IE до версии 9.0 не поддерживает формат RGBA для цвета.

Рис. 3.21. Положение слоя на странице

 

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

 

Использование float

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

  • галереи небольших фотографий;
  • двух и трёхколоночные макеты;
  • горизонтальные меню;
  • иллюстрации в тексте;
  • многоколоночный текст.

float может добавляться к изображениям (тег <img>), блочным элементам вроде <p>, <div> и к строчным элементам (<span>, <a>, <strong>). В примере 3.12 показано использование float для абзаца с фотографией. Свойство float лишь частично влияет на элемент в потоке. Можно управлять положением по горизонтали, меняя значение float с right на left, но по вертикали положение элемента задаётся его местом в коде.

 

Пример 3.12. Плавающий элемент

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Обтекание</title> <style type="text/css">.right { float: right; } </style> </head> <body> <p class="right"><img src="images/cat.jpg" alt="Кошка" /></p> <p>Сфотографировано на камеру Canon EOS 50D. Объектив 24-105, диафрагма 4.0, выдержка 1/500, чувствительность ISO 400</p> </body></html>

 

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

Рис. 3.22. Плавающий элемент

 

 

Поделиться:





Воспользуйтесь поиском по сайту:



©2015 - 2024 megalektsii.ru Все авторские права принадлежат авторам лекционных материалов. Обратная связь с нами...