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

К началу


 

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

21302. Параллельная обработка данных 233.21 KB
  Автоматическое обнаружение параллелизма. Степень и уровни параллелизма. Виды параллелизма. Производительность параллельных ВС зависит от многих факторов и в значительной степени от архитектуры и структуры системы рисовать структуру параллельной системы и объяснять: от степени и уровня параллелизма в системе; от организации передачи данных между параллельно работающими процессорами; от системы коммутации; от взаимодействия процессоров и памяти; от соотношения между аппаратной и программной реализацией макрооперации.
21303. Структурная организация систем обработки данных 156.5 KB
  Организация систем вводавывода. Структура и функции системы вводавывода. Канал вводавывода. Способы организации системы вводаввода.
21304. Уровни комплексирования устройств в вычислительных системах 78.5 KB
  1: 1 прямого управления процессор процессор; 2 общей оперативной памяти; 3 комплексируемых каналов вводавывода; 4 устройств управления внешними устройствами УВУ; 5 общих внешних устройств. Уровень прямого управления служит для передачи коротких однобайтных приказовсообщений. Процессоринициатор обмена по интерфейсу прямого управления ИПУ передает в блок прямого управления байтсообщение и подает команду Прямая запись. Уровень прямого управления не может использоваться для передачи больших массивов данных.
21305. Системы анализа защищенности корпоративной сети (обнаружения уязвимостей) на примере продуктов: Microsoft Baseline Security Analyzer и XSpider 527.5 KB
  Лекция: Системы анализа защищенности корпоративной сети обнаружения уязвимостей на примере продуктов: Microsoft Baseline Security Analyzer и XSpider От эффективности защиты операционных систем напрямую зависит уровень безопасности сетевой инфраструктуры организации в целом. В данной лекции мы познакомимся с такими программными средствами для анализа защищенности ОС как Microsoft Baseline Security Analyzer и сканер безопасности XSpider 7. На этом занятии будут рассмотрены программные средства для анализа защищенности операционных систем...
21306. Обеспечение безопасности хранения данных в ОС Microsoft 543 KB
  Для изменения настроек теневых копий тома отличных от заданных по умолчанию выберите нужный том из списка и нажмите кнопку Параметры рис 3. Окно настройки параметров теневого копирования тома Если вы решили изменить расписание создания теневых копий нажмите кнопку Расписание : появится окно представленное на рис. Окно настройки расписания теневого копирования тома После выполненных настроек нажмите кнопку Включить начнут создаваться теневые копии общих папок на заданном томе. Нажмите ссылку Расширенный режим а затем перейдите на...
21307. Центр обеспечения безопасности (Windows Security Center) в операционной системе Windows XP SP2 1.16 MB
  Лекция: Центр обеспечения безопасности Windows Security Center в операционной системе Windows XP SP2 В этой лекции будет рассмотрен Центр обеспечения безопасности Windows Windows Security Center входящий в состав Windows XP SP2. С помощью этого инструмента пользователь имеет возможность не только контролировать состояние перечисленных выше компонентов но и получать рекомендации по устранению возникающих с этими компонентами проблем В этом занятии будет рассмотрен Центр обеспечения безопасности Windows Windows Security Center входящий...
21308. Средства анализа защищенности 42 KB
  Средства анализа защищенности исследуют сеть и ищут слабые места в ней анализируют полученные результаты и на их основе создают различного рода отчеты. Перечислим некоторые из проблем идентифицируемых системами анализа защищенности: 1. Системы анализа защищенности предназначены для обнаружения только известных уязвимостей описание которых есть у них в базе данных.
21309. Проектирование детали «Вал-шестерня» 354 KB
  По схеме силового нагружения вал-шестерня является двухопорной балкой. Опорными шейками служат: 260k6, которые используются для посадки подшипников поз. 55. Благодаря установке по схеме «враспор» осевой фиксации подшипников не требуется, что упрощает конструкцию шеек вал-шестерни
21310. Технологии межсетевых экранов 202.9 KB
  Основные задачи МЭ: Ограничить доступ пользователей из внешней сети к ресурсам внутренней сети. Обычно внешней сетью является более глобальная относительно внутренней сети например Интернет относительно корпоративной сети или локальная сеть относительно ресурсов локального компьютера. В случае с Интернетом пользователями внешней сети могут быть как удаленные пользователи и партнеры так и хакеры.