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

К началу


 

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

1944. Воспитательный процесс в школе 24.85 KB
  Организационно-педагогические мероприятия. Воспитание положительного отношения школьников к учению. Воспитание нравственных ценностей у школьников. Физическая культура и здоровье учащихся. Работа с родителями и общественностью.
1945. Добро починається з тебе 24.1 KB
  Мета: допомогти учням з’ясувати сутність понять добро, доброта, милосердя як принципів людського буття, навчити учнів критично ставитися до своїх вчинків та вчинків інших людей, аналізувати матеріал з різних джерел і самостійно робити правильні висновки.
1946. Воспитательные функции классного руководителя как организатора воспитательного процесса в школе 25.53 KB
  Основным структурным элементом воспитательной системы школы является класс. Именно здесь организуется познавательная деятельность, формируются социальные отношения между учащимися. Представительские функции в органах самоуправления школы реализуются также чаще всего от имени класса.
1947. Мисс 8 Марта. Воспитательное мероприятие 40.5 KB
  Формировать у учащихся коммуникативные навыки общения в классе, со сверстниками, обогатить культуру общения в семье, развивать эмоциональную сферу учащихся.
1948. Культура мовлення 20.69 KB
  Поглиблювати розуміння учнями етики спілкування, формувати негативне ставлення до лихослів'я, переконувати в потребі кожного підвищувати культуру свого мовлення — найголовнішу ознаку загальної культури.
1949. Шкідливим звичкам немає місця серед нас 24.61 KB
  Ознайомити із поняттям звичка, розкрити різницю між корисними та шкідливими звичками, сприяти усвідомленню учнями необхідності формування корисних звичок, формувати вміння порівнювати і формулювати висновки, розвивати логічне мислення на прикладах впливу корисних та шкідливих звичок на здоров'я та спосіб життя людини; виховувати силу волі для формування корисних звичок та подолання шкідливих, позитивне ставлення до оздоровчого способу життя.
1950. Воспитательный лагерь во Франции 25.5 KB
  Учебно-воспитательное заведение La Rouvelière. Строгость и интенсивное обслуживание каждого молодого человека.
1951. Система воспитательной работы (по видам детства) 25.04 KB
  Основные направления и технология педагогической деятельности. Формирование начальных детских убеждений (НДУ) у младших школьников. Создание ситуации успеха в учебной деятельности.
1952. Воспитательное мероприятие: Вредные привычки 27.26 KB
  Воспитывать в учащихся потребность быть здоровыми. Убеждать в негативном воздействии на молодой организм психоактивных веществ (табачный дым, алкоголь).