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. Это точнее, имеет определённые преимущества  и намного проще в работе.

К началу


 

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

30123. Хромосомные синдромы 19.27 KB
  Хромосомные синдромы: Хромосомные синдромы с числовыми нарушениями аутосом: Синдром Дауна трисомия по хромосоме 21 одна из форм геномной патологии при которой чаще всего кариотип представлен 47хромосомами вместо нормальных 46 поскольку хромосомы 21й пары вместо нормальных двух представлены тремя копиями трисомия см. Существует ещё две формы данного синдрома: транслокация хромосомы 21 на другие хромосомы чаще на 15 реже на 14 ещё реже на 21 22 и Yхромосому 4 случаев и мозаичный вариант синдрома 5 . Синдром получил...
30124. Кариотип 17.21 KB
  Кариотип это совокупность признаков полного набора хромосом соматических клеток организма на стадии метафазы III фаза деления клетки их количество размер форма особенности строения. Исследование кариотипа проводят методом световой микроскопии с целью выявления патологии хромосом. Чаще всего это исследование проводят у детей для выявления заболеваний обусловленных нарушениями в хромосомах и у супругов при бесплодии или привычном невынашивании беременности. Выявление хромосомных перестроек в этом случае позволяет установить причину...
30125. Генетический контроль синтеза ферментов 16.67 KB
  Генетический контроль синтеза ферментов. Однако под действием некоторых сигналов синтез индуцибельных ферментов повышается. coliв присутствии лактозы образуется ряд ферментов участвующих в катаболизме этого дисахарида. Репрессор связывается со специфическим участком ДНК и блокирует транскрипцию генов ответственных за синтез определенных ферментов.
30126. Создание устройства для дистанционного мониторинга основных физиологических показателей человека, программного обеспечения для регистрации частоты сердечных сокращений и температуры тела 3.2 MB
  Устройство для дистанционного мониторинга физиологических показателей человека позволяет удалённо следить за температурой и частотой пульса пациента. Устройство закрепляется на внутренней стороне плеча, что позволяет точнее измерять температуру.
30127. Разработка аппарата коррекции речи, который использует такие методы лечения заикания как «метроном» и «задержанная акустическая связь» 2.4 MB
  Благодаря речи индивидуальное сознание каждого человека, не ограничиваясь личным опытом, собственными наблюдениями, питается и обогащается результатами общественного опыта: наблюдения и знания всех людей становятся или могут благодаря речи стать достоянием каждого. Огромное многообразие стимулов, которое получает благодаря этому человек, дало мощный толчок для дальнейшего развития его мозга
30128. Микро- и наноэлектроника. МЕТОДИЧЕСКИЕ УКАЗАНИЯ ПО ДИПЛОМНОМУ ПРОЕКТИРОВАНИЮ 835 KB
  ЦЕЛИ И ЗАДАЧИ ДИПЛОМНОГО ПРОЕКТИРОВАНИЯ Дипломное проектирование по специальности Микро и наноэлектроника является заключительным этапом обучения студента в университете и имеет следующие цели: систематизацию закрепление и расширение теоретических и практических знаний по специальности применение этих знаний при решении конкретных научных технических экономических и производственных задач; развитие навыков ведения самостоятельной работы и овладение методикой исследования и экспериментирования при решении разрабатываемых в...
30129. Исследование методов позиционирования, а так же разработка устройства для дистанционного мониторинга технических объектов, транспортных средств и человека 873.95 KB
  Одним из основных компонентов системы позиционирования является устройство под названием GPSтрекер.4 Применение систем навигации Кроме навигации координаты получаемые благодаря спутниковым системам используются в следующих отраслях: Геодезия: с помощью систем навигации определяются точные координаты точек Картография: системы навигации используется в гражданской и военной картографии Навигация: с применением систем навигации осуществляется как морская так и дорожная навигация Спутниковый мониторинг транспорта: с помощью систем...
30130. Створення газети на тему «Молодь обирає спорт» у програмі Page Maker 639.28 KB
  Програма PageMaker є складовою частиною лінійки програмних продуктів фірми Adobe, до складу якої крім того входять Adobe Table, Adobe FrameMaker, Adobe PageMill, Adobe Photoshop, Adobe Illustrator, Adobe Streamline, Adobe Premier. Практично кожна з цих програм є світовим лідером в своїй області
30131. Создание управляющих программ с использованием сплайновой интерполяции типов AKIMA(ASPLINE), NURBS(BSPLINE) и кубического сплайна(CSPLINE). Воспроизведение сплайновой интерполяции в системе ЧПУ WinPCNC 184.33 KB
  Воспроизведение сплайновой интерполяции в системе ЧПУ WinPCNC Выполнил: студент гр. Ход Работы В процессе обучения будет рассмотрено использование сплайновой интерполяции на двух примерах. Будем использовать три основных типа сплайна: SPLINE kim сплайн BSPLINE NURBS сплайн CSPLINE кубический сплайн.