Рейтинг:  4 / 5

Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда не активна
 

Позиционирование блоков в CSS

Позиционирование блоков CSS бывает абсолютное, относительное и фиксированное.

Используется элемент position. Значения бывают absolute, relative, fixed. Рассмотрим подробнее.


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


.picture
{position: absolute;
top: 240px;
left: 280px;}

После элемента position пишется его значение, потом указываются две координаты. Отсчёт координат идёт от краёв экрана, это top, left, right, bottom.
Абсолютное позиционирование в CSS позволяет разместить блок в любом месте экрана.
Пример блока с изображением :

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


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


Это позиция блока на экране, относительно позиции в HTML-документе.Задаётся так же в пикселях. Например:

1. Заголовок Н1
2. Параграф
3. Блок 1
4. Блок 2 с относительным позиционированием.
5. Блок 3

На экране элементы будут выводится  поочереди. Сначала заголовок,потом параграф. Блок 2 оставит пустое место ("призрак") и будет отображаться согласно заданным координатам относительно своего расположения в очереди HTML документа. Блок 3 будет идти за ним следующим. Сложно да? Сейчас обьясню на примере.

Зададим координаты для position: relative
верх: top: 40px
слева: left: 80px

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

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

Вот теперь я думаю понятнее.


Фиксированное позиционирование в CSS


.picture
{position: fixed
top: 350px ;
right: 20px ; }

Фиксированное позиционирование схоже с Абсолютным. Разница лишь в том, что блок при таком позиционировании не прокручивается вместе с текстом, он остаётся на месте. То есть отчёт координат идёт не от краёв страницы, а от краёв окна браузера.

С простым позиционированием мы разобрались, теперь дальше.

Переёти к следующему уроку
Свойство Float CSS для блоков

Хотите быстро изучить HTML и CSS?
Тогда вам сюда >>

X

Инструкция по планированию сайта
С чего начать создание сайта?

Инструкция по созданию сайта

  • Инструкция по созданию сайта
  • Шаблон для составления плана сайта
  • Чек-лист по этапам создания сайта

* Никакого спама. Гарантирую!