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

К началу


 

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

36121. Управління поведінкою споживача 1.03 MB
  Підходи та етапи моделювання поведінки споживачів. Поведінка споживачів у промисловому маркетингу. Поведінка споживачів це дії які здійснює окрема особа купуючи і користуючись продукцією чи послугами це розумові і соціальні процеси що передують цим діям або настають за ними. Поведінка споживачів у промисловому маркетингу це процес прийняття рішення яким користується підприємство чи організація для визначення потреби у продуктах послугах ідентифікації оцінювання й вибору торгових марок і постачальників.
36122. Проектування трубопроводів 892.5 KB
  Особливості різних способів транспортування нафтинафтопродуктів і газу. Особливості трубопровідного транспорту. Особливості залізничного транспорту. Особливості морського транспорту. Особливості річкового транспорту. Особливості автомобільного транспорту. Економіка різних видів транспортування нафти інафтопродуктів. Вибір раціонального способу транспортування нафтовихвантажів. Методика розрахунку характеристик за способамитранспортування. Розрахунок економічних показників трубопровідноготранспорту...
36124. Основи статистики. Конспект лекцій 342.46 KB
  Статистичні спостереження. Статистичні спостереження. Суть та організаційні форми статистичного спостереження. План статистичного спостереження.
36125. Релігієзнавство. Основи філософських знань 181 KB
  Філософія релігії Мені довелося потіснити знання щоб звільнити місце вірі І. Центральний об’єкт релігійної віри – Бог саме з нього виводиться зміст усієї релігії. Розподіл філософії та релігії на самостійні форми суспільної свідомості відбувається лише в Новий час коли починають розвиватися природничі науки механіка. Філософія прагне заповнити емоційнодушевну пустоту відновити властиву релігії психологічну рівновагу.
36126. Основи національної економіки 2.85 MB
  Основні етапи розвитку національної економіки України. Особливості й ключові завдання сучасного етапу розвитку української національної економіки. Основні показники рівня розвитку національної економіки. ПОНЯТТЯ НАЦІОНАЛЬНОЇ ЕКОНОМІКИ ЯК РЕЗУЛЬТАТУ ЕКОНОМІЧНОЇ ДІЯЛЬНОСТІ Поняття національна економіка досить багатозначне оскільки це перш за все певний підсумок багатовікового розвитку народногосподарського комплексу країни.
36127. Соціальне страхування 462.5 KB
  Сутність принципи й роль соціального страхування План Сутність і необхідність соціального страхування в умовах ринкової економіки. Становлення і розвиток соціального страхування. Сутність і необхідність соціального страхування в умовах ринкової економіки. У багатьох країнах діє система взаємодоповнюючого соціального страхування що містить у собі такі елементи як: Державне соціальне забезпечення; Корпоративні соціальні програми; Індивідуальне часткове страхування.
36128. Системне програмне забезпечення 506.5 KB
  Переміщаючі завантажувачі можуть помістити програму в будьяке вільне місце в памяті. Очевидно що в більшості випадків початкові дані потрапляють в оперативну память із зовнішніх пристроїв. Класифікація ресурсів При розробці перших систем ресурсами вважалися процесорний час память канали вводу виводу і периферійні пристрої. Відповідно доки здійснювався обмін даними між оперативною памяттю і зовнішніми пристроями процесор не міг виконувати обчислення.
36129. КОНСПЕКТ ЛЕКЦІЙ НАВЧАЛЬНОЇ ДИСЦИПЛІНИ ЕКОЛОГІЧНА СТАНДАРТИЗАЦІЯ І СЕРТИФІКАЦІЯ для студентів 5 курс 130 KB
  Національні стандарти мають позначку абревіатуру ДСТУ – державний стандарт України. Міжнародні стандарти що введені в дію в Україні мають позначки ДСТУ ISO і ДСТУ EN. Розроблені державні стандарти України отримали абревіатуру – ДСТУ. З’явилися екологічні стандарти з позначками: ДСТУ ISO ДСТУ EN.