Вторник, 17.10.2017, 16:30
Приветствую Вас Гость | rss
Меню сайта
Форма входа

Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0

Урок 14: Позиционирование элементов


  При помощи CSS-позиционирования вы можете разместить элемент точно в нужном месте страницы. Вместе с поплавками (см. Урок 13) позиционирование даёт вам большие возможности для создания точного и навороченного дизайна.

В этом уроке мы обсудим следующее:

  •      Принципы CSS-позиционирования
  •      Абсолютное позиционирование
  •      Относительное позиционирование

Принципы CSS-позиционирования

Представим окно браузера как систему координат:


css позиционирование


Принципы CSS-позиционирования  - в том, что вы можете расположить бокс в системе координат где угодно.

Скажем, мы хотим позиционировать заголовок. При использовании боксовой модели (см. Урок 9) заголовок выглядит так:


заголовок


Если мы хотим расположить его на 100px от верхней границы документа и на 200px слева, мы должны ввести следующий код CSS:

h1{
position:absolute;
top: 100px;
left: 200px;
}



Вот результат:

позиционирование

Как видите, позиционирование с помощью CSS - очень точная техника при размещении элементов. Это намного проще, чем использовать таблицы, прозрачные изображения или ещё что-нибудь подобное.


Абсолютное позиционирование

Элемент, позиционированный абсолютно, не получает никакого пространства к документе. Это означает, что после позиционирования он не оставляет после себя пустое пространство.

Для абсолютного позиционирования элемента свойство position должно иметь значение absolute. Вы можете использовать значения left, right, top и bottom для размещения бокса.

В качестве примера абсолютного позиционирования мы разместим 4 бокса в углах документа:

#box1{
background: yellow;
position:absolute;
border:2px solid black;
top: 60px;
left: 60px;
}


#box2{
background: SlateBlue;
border:2px solid black;
position:absolute;
top: 50px;
right: 50px;
}



#box3{
position:absolute;
background: Red;
border:2px solid black;
bottom: 60px;
right: 60px;
}


#box4{
background: LimeGreen;
position:absolute;
border:2px solid black;
bottom: 60px;
left: 60px;
}




абсолютное позиционирование



Относительное позиционирование

Чтобы позиционировать элемент относительно, установите в свойстве position значение relative. Разница между относительным абсолютным позиционированием состоит в том, как обсчитывается позиционирование.

Позиция элемента, размещаемого относительно, обсчитывается относительно его оригинальной позиции в документе. Это означает, что вы смещаете элемент вправо, влево, вверх или вниз. Таким образом, элемент всё ещё занимает в документе пространство после позиционирования.

Как пример относительного позиционирования попробуем разместить три рисунка относительно их оригинального расположения на странице. Обратите внимание, что рисунки оставили после смещения пустое пространство на своих оригинальных позициях в документе:


relative


#dog1{
position:relative;
left: 50px;
bottom:50px;
}
#dog2{
position:relative;
left: 20px;
bottom:100px;
}



position


Поиск
Календарь
«  Октябрь 2017  »
ПнВтСрЧтПтСбВс
      1
2345678
9101112131415
16171819202122
23242526272829
3031
Архив записей

rss
Яндекс.Метрика Каталог@Mail.ru - каталог ресурсов интернет