Позиционирование блоков в CSS часть1

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

Блочная модель и позиционирование

Немного повторения. В статье об отступах и полях в CSS упоминалось, что все блочные элементы имеют прямоугольную форму. Они располагаются на веб-странице один под другим — такой порядок следования блочных элементов называют общим потоком. Рассмотрим на примере расположение бл. эл. в общем потоке:

<style type="text/css">
P {
background-color: maroon; /* Цвет фона под текстом параграфа */
color: white; /* Цвет текста */
}
div {
background-color: #3366CC;
color: white;
}

li {
background-color: #6fc;
}
</style>
</head>
<body>
<p>абзац</p>
<div>div-контейнер</div>
<li>Элемент списка</li>

А так это выглядит в браузере:

общий поток в позиционировании

Для блоков указывают размеры полей и отступов. Определяют и границу между ними, она же будет и рамкой самого блока. Эти внутренние отступы(поля) и размеры рамки меняют первоначальные длину и ширину блока.

Порядок позиционирования в CSS определяется свойством position. Свойство position имеет пять значений:

  • static — применяется по умолчанию, и не изымается из общего потока веб-документа. К блокам с таким значением позиционирования не применимы параметры top, right, bottom и left.
  • inherit — задает блоку значения родительского элемента
  • relative — относительное поз — ие
  • absolute — абсолютное позиц — ие
  • fixed — фиксированное позицио — е

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

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

Вот только место, только что покинутое элементом, из общего потока не изымается. Переместившись на другую позицию, блок по-прежнему влияет на соседние веб-конструкции, как если бы, он оставался на месте.
Предлагаю посмотреть действие свойства position: relative; на примере. Использован предыдущий код, с добавлением ширины всем блокам по 150px , также обнулены все отступы и поля по умолчанию, и еще для тега div  добавили следующее:

position:relative;
top: 30px;
left:80px;

Теперь посмотрите скриншот.

 свойство CSS position_relative

Как видите, div переместился вправо и вниз относительно своих прежних координат. Блок li остался на прежнем месте. Подняться на освободившееся место ему мешает особенность значения relative, упомянутое выше. Но есть еще одна особенность у относительного позиционирования.

Блок div перекрыл часть нижнего элемента, это сделано специально, для наглядности. Данная особенность позволяет накладывать одни элементы дизайна на другие. В этой статье было рассмотрено лишь относительное позиционирование. Остальные значения свойства CSS  position будут представлены в следующем посте.

Поделиться в соц. сетях

Опубликовать в Google Buzz
Опубликовать в Google Plus
Опубликовать в LiveJournal
Опубликовать в Мой Мир
Опубликовать в Одноклассники

Реклама

Оставить комментарий

Перед отправкой формы:
Human test by Not Captcha