12793

Позиционирование элементов

Практическая работа

Информатика, кибернетика и программирование

Позиционирование элементов При помощи CSSпозиционирования вы можете разместить элемент точно в нужном месте страницы. Вместе с поплавками см. лаб. № 11 позиционирование даёт вам большие возможности для создания точного и навороченного дизайна. В этом уроке мы обсуди

Русский

2013-05-03

41.88 KB

3 чел.

Позиционирование элементов

При помощи CSS-позиционирования вы можете разместить элемент точно в нужном месте страницы. Вместе с поплавками (см. лаб. № 11) позиционирование даёт вам большие возможности для создания точного и навороченного дизайна.

В этом уроке мы обсудим следующее:

  •  Принципы CSS-позиционирования 
  •  Абсолютное позиционирование 
  •  Относительное позиционирование 

Принципы CSS-позиционирования

Представим окно браузера как систему координат:

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

Скажем, мы хотим позиционировать заголовок. При использовании боксовой модели (см. лаб.№7) заголовок выглядит так:

Если мы хотим расположить его на 100px от верхней границы документа и на 200px слева, мы должны ввести следующий код CSS:

h1 {

position:absolute;

top: 100px;

left: 200px;

}

Вот результат:

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

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

Элемент, позиционированный абсолютно, не получает никакого пространства в документе. Это означает, что после позиционирования он не оставляет после себя пустое пространство.

Для абсолютного позиционирования элемента свойство position должно иметь значение absolute. Вы можете использовать значения left, right, top и bottom для размещения бокса.

В качестве примера абсолютного позиционирования мы разместим 4 бокса в углах документа:

#box1 {

position:absolute;

top: 50px;

left: 50px;

}

#box2 {

position:absolute;

top: 50px;

right: 50px;

}

#box3 {

position:absolute;

bottom: 50px;

right: 50px;

}

#box4 {

position:absolute;

bottom: 50px;

left: 50px;

}

  •  Показать пример 

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

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

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

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

#dog1 {

position:relative;

left: 350px;

bottom: 150px;

}

#dog2 {

position:relative;

left: 150px;

bottom: 500px;

}

#dog3 {

position:relative;

left: 50px;

bottom: 700px;

}

  •  Показать пример 

Задание: в последнем примере поменяйте позиционирование на абсолютное, почувствуйте разницу. 

Резюме

В последних двух уроках вы научились создавать поплавки и позиционировать элементы. Эти два метода дают вам определённые преимущества при конструировании страниц без необходимости использовать старые методы вроде таблиц и прозрачных изображений в HTML. Вместо них используйте CSS. Это точнее, имеет определённые преимущества  и намного проще в работе.

К началу


 

А также другие работы, которые могут Вас заинтересовать

43161. ИСПОЛНИТЕЛЬНЫЙ МЕХАНИЗМ 4.44 MB
  Провести расчет элементов и параметров конструкции исполнительного механизма прибора комплекса ЛА с учетом указанных в задании системных особенностей. Введение 4 Расчет кинематических параметров 5 Выбор двигателя 5 Расчет мощности двигателя 5 Кинематический расчет редуктора 6 Определение передаточного числа 6 Выбор кинематической схемы и типа используемых зп 7 Расчет числа зубьев 7 Ошибка по скорости 8 Расчет КПД...
43162. Проектирование технических расчетов зон ТО, диагностики и ТР на примере подвижного состава автотранспортных предприятий 273.5 KB
  Автомобильный транспорт является наиболее массовым и удобным видом транспорта обладающим большой манёвренностью хорошей проходимостью и приспособленностью для работы в различных климатических и географических условиях. Техническое обслуживание ТО является профилактическим мероприятием проводимым в плановом порядке через определенные длительность пробега или срок работы подвижного состава. ТО1 и ТО2 включают контрольнодиагностические крепёжные...
43163. Водный транспорт леса 2.26 MB
  В данном курсовом проекте рассмотрен пример организации первоначального лесосплава, представляющий собой комплекс производственных и подготовительных работ, связанных с перемещением лесных грузов по водным путям. В проекте рассматриваются наиболее распространенные виды водной транспортировки леса - молевой лесосплав, сплав леса в пучках, плотах и в баржах. Также необходимо оптимальным образом подобрать технику и оборудование на технологических участках, что, в свою очередь, обеспечивало бы беспрерывность работы и снижало простой данного оборудования.
43164. Восстановление детали оси пульта управления автокрана К-64 и разработка технологической планировки кабино-жестяницкого участка завода по ремонту тракторов Т-130 374.5 KB
  Курсовой проект является завершающим этапом изучения дисциплины ремонт машин и оборудования позволяющим в ходе работы над ним углубить и закрепить умение и навыки более детально изучить вопросы восстановления детали в частности оси пульта управления автокрана К64 углубить и закрепить умение и навыки в разработке технологической планировки медницкорадиаторного участка завода по ремонту тракторов Т130. В настоящее время ремонт детали достаточно широко применяется в практике эксплуатации строительных машин что и делает тему...
43165. Тепловой расчет конвективной туннельной сушильной установки для зимнего и летнего режимов 1.72 MB
  Определяем по заданным температурам tол=20.4 Определяем влагосодержание do г кгс.5 Определяем энтальпию ho кДж кгс.6 Определяем плотность природного газа при нормальных условиях.
43166. Тепловой расчет конвективной туннельной сушильной установки для зимнего (январь) и летнего (июль) периода 1.57 MB
  Выполнить тепловой расчет конвективной туннельной сушильной установки, определить длительность сушки, размеры установки, выбрать вентилятор для подачи наружного воздуха, дымосос, циклон и сожигательное устройство, на основании следующих данных.
43167. ОСКОРБЛЕНИЕ КАК ИЛЛОКУТИВНЫЙ ЛИНГВОКУЛЬТУРНЫЙ КОНЦЕПТ 194 KB
  Научная новизна данной работы заключается в применении концептологического подхода к рассмотрению лингвистических проблем права и в историко-этимологическом описании социальных явлений, которые стали основой современного толкования концепта «оскорбление». В работе была исследована дискурсная реализация этого концепта и выделена типовая базовая структура иллокутивных концептов, объясняющая прагматическую природу лингвосоциальных явлений
43168. ОБРАЗ ШЕРЛОКА ХОЛМСА В ПРОИЗВЕДЕНИЯХ СЭРА АРТУРА КОНАН ДОЙЛА 248.5 KB
  При этом мироощущение и fin de siècle и неоромантизма было подчеркнуто инаким особенным что не устраивало консервативное викторианское общество и образ Шерлока Холмса начал меняться под воздействием такого экстралитературного фактора как цензура: образ редактировался и упрощался чтобы умещаться в строгие рамки жанра семейного чтения. Таким образом образ Шерлока Холмса прошел в процессе своего формирование через влияние fin de siècle и неоромантизма чтобы прийти к викторианским традиционным ценностям. В данной работе...
43169. Дистанционное зондирование Земли из космоса 412.04 KB
  Система правового регулирования ДЗЗ в России и в мире 9 Глава 1. Общие понятия ДЗЗ 9 Глава 2. Международноправовые акты регулирующие ДЗЗ 10 Глава 3. Ранее являясь исключительно прерогативой военных структур сегодня ДЗЗ решает множество гражданских задач и является крайне важной для обеспечения защиты окружающей природной среды разведки полезных ископаемых кадастрового учета и иных направлений деятельности.