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

К началу


 

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

11767. Транспортна задача лінійного проґрамування 656.5 KB
  Транспортна задача лінійного проґрамування. Математична та змістовна постановка транспортної задачі. Методи знаходженння початкового опорного плану транспортної задачі. Метод потенціалів. Розв’язування транспортних задач з ускладненнями в постановці....
11768. НЕЛІНІЙНЕ ПРОГРАМУВАННЯ. ГРАФІЧНИЙ МЕТОД 609.85 KB
  на тему НЕЛІНІЙНЕ ПРОГРАМУВАННЯ. ГРАФІЧНИЙ МЕТОД. Мета роботи: ознайомлення з задачами нелінійного програмування набуття навиків їх розв’язку та аналізу графічним методом вивчення та оволодіння навичками адресації та роботи з формулами в таблицях в Еxcel вивчення т
11769. Розв’язання лінійних оптимізаційних задач за замовленням та при умовних вхідних даних 132.69 KB
  Звіт до лабораторної роботи № 6 Розв’язання лінійних оптимізаційних задач за замовленням та при умовних вхідних даних. з курсу Математичні методи дослідження операцій Мета роботи: Вивчити методологію розв’язання задач з призначенням критері
11770. Розв’язання транспортних задач лінійного програмування 87.87 KB
  Звіт до лабораторної роботи № 7 Розв’язання транспортних задач лінійного програмування. з курсу Математичні методи дослідження операцій Мета роботи: Вивчити особливості розв’язування транспортних задач за допомогою Solver. 1.1 Теоретичні відомості. П
11771. Розв’язання та аналіз задач булевого програмування за допомогою Excel 86.2 KB
  Звіт до лабораторної роботи № 9 Розв’язання та аналіз задач булевого програмування за допомогою Excel з курсу Математичні методи дослідження операцій Мета роботи: Вивчити метод розв’язання задач булевого програмування в Solver. Теоретичні відомості. Рішен...
11772. Розв’язання цілочисельних задач ЛП за допомогою Excel. Графічне представлення та порівняння розв’язків цілочисельної та неперервної задачі 76.8 KB
  Звіт до лабораторної роботи № 8 Розв’язання цілочисельних задач ЛП за допомогою Excel. Графічне представлення та порівняння розв’язків цілочисельної та неперервної задачі з курсу Математичні методи дослідження операцій Мета роботи: Вивчити особливості предст...
11773. Решение задачи целочисленного ЛП с помощью динамического программирования 481.5 KB
  Курсовая работа по дисциплине МАТЕМАТИЧЕСКИЕ МЕТОДЫ ИССЛЕДОВАНИЯ ОПЕРАЦИЙ на тему Решение задачи целочисленного ЛП с помощью динамического программирования АННОТАЦИЯ Курсовая работа содержит 40 страниц 8 формул 17 таблиц 10 литературных источников. В ...
11774. Розв’язання несумісних задач лінійної оптимізації в діалоговому режимі 199.06 KB
  Звіт до лабораторної роботи №4 на тему: Розв’язання несумісних задач лінійної оптимізації в діалоговому режимі З курсу: Математичні методи дослідження операцій Мета: Знайти оптимальний розв’язок розподілу ресурсів за умови первинної наявності несумісн
11775. Предмет та задачі дослідження операцій 165 KB
  Предмет та задачі дослідження операцій Предмет та історія виникнення дослідження операцій ДО. Основні поняття ДО та етапи операційного дослідження Пряма та обернена задачі ДО. Детерміновані задачі ДО. Проблема вибору розв’язків в умовах невизначеності. ...