Рубрика CSS
Позиционирование в CSS
Когда люди мало знакомы с основами CSS, проявляется тенденция стремления к позиционированию. Позиционирование кажется на первый взгляд простым. Вы определяете, где точно должен быть расположен блочный элемент. Но все не так просто, как, кажется на первый взгляд. Есть несколько вещей, которые могут запутать новичков.
С помощью позиционирования вы сможете сделать много полезного, когда поймете, как оно работает.
Box-модель в CSS и типы позиционирования
Чтобы понять, как работает позиционирование, вам нужно сначала познакомиться с box-моделью в CSS. Каждый элемент в CSS состоит из прямоугольных блоков, для которых указываются величины внутренних и внешних отступов и граница, которая отделяет один блок от другого. Пример вы можете увидеть на рисунке ниже.
Схема позиционирования определяет, где будет находиться блок, и как он будет влиять на другие элементы вокруг себя. Схема позиционирования включает в себя документ с плавающими (floats) и позиционируемыми (position) элементами.
Свойство position в CSS может принимать пять значений:
- position: absolute
- position: relative
- position: fixed
- position: static
- position: inherit
Я расскажу о первых трех значениях более подробно и пару слов о последних двух. Значение static – значение по умолчанию. Любой элемент с позиционированием static находится в общем потоке документа. Правила для того, где он находится, и как он будет влиять на другие блоки, определены Box-моделью. Элемент с позиционированием static проигнорирует свойства top, right, bottom и left. Чтобы использовать любое из этих свойств, у элемента должно быть (absolute) абсолютное, (relative) относительное или (fixed) фиксированное позиционирование.
Значение Inherit, как и во всех свойствах CSS, используется для того, чтобы текущий элемент получил такое же значение, как у родительского элемента.
Абсолютное позиционирование
Абсолютное позиционирование полностью удаляет элементы из общего потока документа. Что касается элементов вокруг, то они просто не существуют. Будто элементу не было установлено свойство display. Если вы не хотите, чтобы пространство для элемента заполнили другие элементы, то нужно придумать другой способ.
Вы устанавливаете расположение элемента с абсолютным позиционированием с помощью свойств top, left, right и bottom. Вам достаточно определить только два из них top или bottom и left или right. Если ни одно из вышеперечисленных значений не установлено, то устанавливается по умолчанию значение равное нулю для top и left.
Ключевой момент к пониманию абсолютного позиционирования – это понимание начала координат. Если свойству top установлено значение 20px, то возникает вопрос – откуда отсчитывать.
Элементы с абсолютным позиционированием позиционируются относительно ближайшего родительского элемента, который имеет позицию, отличную от static. Если нет родительского элемента, то элемент позиционируется относительно основного документа.
Звучит немного запутанно с родственными элементами, особенно когда встретилось относительное позиционирование, о котором мы еще не говорили.
Когда вы устанавливаете абсолютное позиционирование, CSS сообщает браузеру, что нужно посмотреть на родительский элемент и, если он имеет не статическое позиционирование, то нужно выровнять данный элемент относительно top, left.
Относительное позиционирование
Элементы с относительным позиционированием располагаются на основе свойств top, right, bottom и left и просто передвигаются относительно своего первоначального расположения. Это похоже на добавление элементу внешних отступов с помощью свойства margin. Элементы вокруг относительно позиционированного элемента игнорируют сдвиг.
Представьте себе: некое изображение немного сдвинулось, а на этом месте остается «призрак» и все элементы располагаются относительно этого «призрака». Это позволяет элементам накладываться друг на друга.
Следовательно, относительно позиционированный элемент взят из нормального потока документа, но все еще влияет на расположение элементов вокруг себя. Таким образом соседние элементы ведут себя так, как будто бы исходный элемент все еще находится в нормальном потоке документа.
Мы не должны задавать вопрос относительно чего позиционируется элемент в данном случае. Ответ всегда – нормальный поток документа. Отчасти это похоже на добавление внешнего отступа к элементу, но в то же время не затрагиваются соседние элементы.
Фиксированное позиционирование
Фиксированное позиционирование действует так же, как и абсолютное позиционирование, но имеются небольшие различия.
Во-первых, элемент с фиксированным позиционированием всегда располагается относительно окна браузера со свойствами top, right, bottom и left. Родительские элементы при этом будут игнорироваться.
Во-вторых, отличие заключается в его названии. Элементы фиксированного позиционирования зафиксированы. Они не двигаются при прокручивании страницы.
Z-index
Страница – двумерная плоскость. У нее есть ширина и высота. Мы живем в трехмерном мире, который также включает в себя глубину, в этом смысле z-index – глубина.
Чем выше z-index тем выше на странице находится элемент при этом он располагается в передней части страницы. И наоборот более низкий z-index находится позади более высокого z-index и отступает к обратной стороне страницы.
По умолчанию значение z-index равняется нулю, допустимы так же и отрицательные значения.
Фактически z-index намного сложнее, чем я его описываю, но более подробно в отдельной статье. Главное запомните основную идею дополнительной размерности и то, что только позиционируемые элементы могут использовать свойство z-index.
Проблемы позиционирования
Существует несколько общих проблем, связанных с позиционированием, а так же изложены способы их решения.
- Вы не можете одновременно применить свойство position и свойство float к одному и тому же элементу. Оба эти свойства находятся в противоречии, если вы примените эти два свойства к одному элементу, то использоваться будет свойство, указанное последним.
- Внешние отступы не «свертываются» у абсолютно позиционированных элементов. Предположим, что у вас на странице есть параграф с нижним отступом 20px. Ниже параграфа размещается изображение с верхним полем 30px. Расстояние от параграфа до изображения не будет 50px (20px + 30px), а 30px (30px > 20px). Это называется collapsing margins. Эти два отступа объединяются в один. У абсолютно позиционированных элементов нет полей для «свертывания», поэтому результат может отличаться от ожидаемого.
- IE и z-index. В IE6 выбор элемента происходит на вершине стека, независимо от его z-index-а, z-index-ов и других элементов вокруг него.
В IE6 и IE7 есть еще одна проблема, связанная с z-index-ом. IE смотрит на родительский элемент для определения, в какой группе элементов находится вершина стека. Вот например;
<div style="z-index: 0">
<p style="z-index: 10"></p>
</div>
<img style="z-index: 5" />Можно подумать, что параграф будет находиться в верхней части стека, так как он имеет самый высокий z-index. Однако IE6 и IE7 помещают изображение выше параграфа, потому что они находятся в разных стеках документа. Один для div, второй для изображения. Изображение имеет более высокий z-index, чем div, и поэтому будет находиться выше.
Заключение
Свойство position ведет себя в соответствии с одной из схем CSS позиционирования. Вы можете установить значения: absolute, relative, fixed, static (по умолчанию), а так же inherit.
Схемы позиционирования определяют правила размещается элемента на web-странице, а так же влияние на размещение соседних элементов.
Свойство z-index может быть применено только к элементам с установленным свойством position. Это свойство добавляет третье измерение на страницу и устанавливает стек для элементов.
Свойство position кажется лёгким для восприятия, но оно работает немного по-другому, как кажется на первый взгляд. Вы думаете, что необходимо применить относительное позиционирование, вместо этого правильнее было бы использовать абсолютное позиционирование. Для вёрстки web-страницы используется свойство float, а свойство position используется для элементов, которые вы хотите «вырвать» из общего потока документа.
