Свойство: позиционирование

Рассмотрим как изменять расположение тегов на странице. Для этого предназначены свойства, влияющие на позиционирование элементов.

text-align

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

Свойство text-align позволяет выровнять текст, картинку или любой тег, за исключением table, одним из следующих способов:

• left – по левому краю;

• right – по правому краю;

• center – по центру;

• justify – по ширине.

Выравнивается все, что находится внутри тега, которому присваивается свойство text-align.

Центрирование блока

Часто возникает необходимость расположить по центру блок с содержимым, имеющий фиксированный размер.

Самый простой способ – установить для блока одинаковый padding слева и справа. В этом случае блок размещается по центру. НО! Ширина блока зависит от ширины экрана. А если еще задать свойство min-width, то при нехватке ширины экрана будет появляться горизонтальная полоса прокрутки.

Как же центрировать блок с фиксированной шириной? Если попробовать применить text-align: center, то это ничего не даст.

Проблема заключается в том, что свойство text-align не будет центрировать блочные теги до тех пор, пока блочным тегам не сбросят левый и правый margin, т.е. для левого и правого margin не будет указано значение auto.

Полный код, позволяющий центрировать блок, выглядит так:

body

{

text-align: center;

}

#block_center

{

width: 900;

margin: 0 auto;

text-align: left;

}

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

Общепринято, что реальная ширина центрированного блока не должна превышать 1024 пикселов. Дело в том, что верстальщики по-прежнему ориентируются на мониторы шириной 1024 пикселов. И если ширина отцентрированного блока будет превышать 1024 пиксела, на таких мониторах будут появляться горизонтальная прокрутка. А этого лучше избегать.

И если считать, что мониторов с таким разрешением на свете уже не существует, то нужно вспомнить о нетбуках – на большинстве из них ширина экрана как раз составляет 1024 пиксела.

position

Свойство text-align лишь косвенно относится к позиционированию элементов. Когда говорят о позиционировании, подразумевают свойство position. Синтаксис:

position: absolute | fixed| relative | static | inherit

Значение по умолчанию – static.

С помощью свойства position можно сдвинуть любой тег относительно его текущего местоположения либо относительно родительского тега.

Размер сдвига задается свойствами left, top, botoom и right.

По умолчанию тег находится на том месте, где вы его указали в HTML. Это эквивалентно значению static свойства position. Другие значения этого свойства означают:

• absolute – назначает тегу абсолютное позиционирование, при котором тег позиционируется относительно экрана либо относительно первого родительского тега, для которого также задано позиционирование;

• relative – назначает тегу относительное позиционирование, при котором тег позиционируется относительно его текущего расположения;

• fixed – назначает тегу фиксированное позиционирование, при котором тег зафиксирован в определенном месте окна браузера и не покидает своего положения при прокрутке.

Как только вы укажете свойству position любое значение, кроме static и inherit, тег из двумерного пространства переносится в трехмерное. До сих пор все содержимое страницы находилось в двумерном пространстве. Но после применения свойства position пространство становится трехмерным. А сам тег, для которого было применено данное свойство, помещается на отдельный слой этого пространства. Причем данный слой имеет определенную глубину, т.е. может располагаться выше или ниже других слоев.

Для изучения особенностей свойства position нам нужно знать назначение свойств left, top, bottom и right.

left, top, bottom, right

Синтаксис:

left: значение | проценты | auto | inherit

right: значение | проценты | auto | inherit

top: значение | проценты | auto | inherit

bottom: значение | проценты | auto | inherit

Как только тег выходит за пределы двумерного пространства, на него начинают действовать свойства:

left – смещение слева либо расположение тега относительно левой границы;

top – смещение сверху либо расположение тега относительно верхней границы;

bottom – смещение снизу либо расположение тега относительно нижней границы;

right – смещение справа либо расположение тега относительно правой границы.

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

При относительном позиционировании расположение тега задается относительно его текущего положения. При этом в качестве значения свойств left, top, right и bottom выступает смещение:

<p>что написано пером, того <span > не </span> вырубишь топором<p>

Если применить CSS получим:

span {

position: relative;

top: +11px;

background: #0f0;

color: green;

}

Изменим значение top на -11px:

span {

position: relative;

top: -11px;

background: #0f0;

color: green;

}

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

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

• ближайший родительский элемент, для которого задано свойство position со значением relative, absolute или fixed;

• если такого родительского элемента нет, то экран браузера (тег body).

Само же расположение тега определяется свойствами left, top, right и bottom. Как правило, задаются два из перечисленных свойств: left или right плюс top или bottom.

Например:

• left: 0; top: 0; - тег расположен в верхнем углу слоя;

• right: 7px; top: 0; - тег размещен вверху слоя, на расстоянии 7 пикселов от правой границы слоя;

• left: -11px; bottom: 7px; - тег расположен на 11 пикселов левее левой границы слоя и на расстоянии 7 пикселов от нижней границы слоя.

Рассмотрим примеры:

<div class=”thisparent”>Что написано пером, того <div class=”thischild”> не</div> вырубишь топором</div>

Таблица стилей:

.thisparent {

background: #ccc;

margin: 33px;

padding: 11px;

}

.thischild

{

position: absolute;

left: 0;

top: 0;

}

Как видно, тег с классом thischild стал позиционироваться относительно экрана браузера, что не очень подходит для нашего примера. Сделаем так, чтобы тег с классом thischild позиционировался относительно родительского элемента. Для этого достаточно классу thisparent добавить следующие свойства:

.thisparent

{

position: relative;

left: +0px;

}

Свойство left необходимо указывать для того, чтобы тег окончательно переместился на новый слой.

Посмотрим, как ведут себя свойства top, left, right, bottom.

right: 7px;

top: 0;

left: -11px;

bottom: 7px;

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

При фиксированном позиционировании элемент располагается на одном месте в пределах окна браузера и не смещается ни при каких обстоятельствах ( при прокрутке страницы).

Рассмотрим пример:

z-index

Значение по умолчанию: auto.

Наследуется: нет.

Применяется: к любым позиционированным элементам.

Синтаксис:

z-index: число | auto | inherit

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

Свойство z-index как раз и предназначено для задания глубины тега. Чем больше значение свойства z-index, тем выше будет тег относительно других тегов. Таким образом, поверх других тегов будет отображаться тот из них, для которого задано наибольшее значение z-index

Рассмотрим пример:

<div class=”tagA”> тег А</div>

<div class =”tagB”>тег В</div>

CSS-файл:

.tagB{

text-align: center;

background: #ccc;

padding: 11px;

width: 133px;

height: 133px;

position: absolute;

left: 11px;

top: 11px;

z-index: 7;

}

.tagA{

text-align: center;

background: #777;

padding: 11px;

width: 133px;

height: 133px;

position: absolute;

left: 23px;

top: 53px;

z-index: 11;

}

Вид окна браузера будет таким:

В итоге блоки «Тег А» и «Тег Б» располагаются друг над другом. Причем блок «Тег А» находится над блоком «Тег Б», несмотря на то что в HTML блок «Тег Б» указан позже блока «Тег А».

float

Значение по умолчанию: none

Синтаксис:

float: left | right | none | inherit

Свойство float предназначено для создания плавающих тегов. Содержимое плавающего тега будет обтекаться другими тегами.

К значениям данного свойства относятся следующие:

• left — создает плавающий тег, выровненный по левому краю. Все другие элементы будут обтекать данный тег с правой стороны;

• right — создает плавающий тег, выровненный по правому краю. Все другие элементы на странице будут обтекать данный тег с левой стороны.

Рассмотрим пример:

<div>

<div class="tagF">На этом мы заканчиваем рассмотрение свойства position...</div>

Свойство float предназначено для создания плавающих тегов.

</div>

<div class="tagF">На этом мы заканчиваем рассмотрение свойства position...</div>

Свойство float предназначено для создания плавающих тегов.

</div>

CSS-код:

.tagF{

background: #ccc;

width: 133px;

margin-right: 11px;

float: left;

}

Для плавающего тега всегда нужно указывать ширину. Причем ширину в процентах указывать нельзя.

clear

Значение по умолчанию: none

Применяется к блочным и плавающим элементам.

Синтаксис:

clear: none | left | right | both | inherit

Можно сказать, что оно проводит некую незримую границу. До этой границы плавающие теги работают. А после нее те же плавающие теги не оказывают уже никакого влияния. Хотя новые плавающие теги, написанные после тега со свойством clear, также будут работать.

В качестве значения свойства clear могут выступать следующие ключевые слова:

• left – отменить обтекание слева (действие правила float: left);

• right – отменить обтекание справа;

• both – отменить любое обтекание.

Изменим наш пример так, чтобы страница отображалась так, как нужно:

<div class="clear"> </div>

<div class="tagF">На этом мы заканчиваем рассмотрение свойства position...</div>

Свойство float предназначено для создания плавающих тегов.

<div class="clear"> </div>

<div class="tagF">На этом мы заканчиваем рассмотрение свойства position...</div>

Свойство float предназначено для создания плавающих тегов.

Удобно создать специальный класс для применения свойства clear:

div.clear{

clear: both;

height: 0px;

overflow: hidden;

}

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

Тогда CSS-файл примет вид:

.tagF{

background: #ccc;

margin: 0 11px 11px 11px;

width: 133px;

float: left;

}

div.clear{

clear: both;

height: 0px;

overflow: hidden;

}