CSS Position: примеры

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

Специфика построения потока документа

Position CSS работает с потоком веб-страницы. Как это понять? По умолчанию все элементы страницы располагаются в том порядке, в котором вы создали их в html-разметке. Если тег header расположен над тегом footer, то и на странице он будет отображаться выше. И наоборот, если вы почему-то решите разместить footer в html над «хедером», «подвал» страницы будет отображаться над «шапкой». При этом блочные элементы занимают всю доступную для них ширину. Строчные, в свою очередь, располагаются в одну строку, пока не займут ее всю, а потом начнут переноситься на новую. Этот порядок именуется «потоком документа».


css position

Для изменения поведения потока используется свойство Position в CSS. Также он может меняться из-за свойства float, но его мы рассматривать не будем. С помощью позиционирования можно заставить элемент «выпасть» из обычного потока, после чего он начнет вести себя по-новому. Как именно – зависит от использованного значения свойства.

CSS Position: static

Position: static, или статическое позиционирование, является значением по умолчанию для всех блоков html, которые вы создали. В обычных условиях вам не придется иметь с ним дело. Если для какого-нибудь блока или строки не задано вообще никакого позиционирования, значит, оно имеет значение static. На странице такой компонент отображается в соответствии с потоком. Если указать ему свойства right/left или top/bottom, никакого эффекта не будет.


CSS Position: fixed

При использовании этого свойства элемент оказывается вне нормального потока документа. Теперь его положение вычисляется относительно окна браузера, независимо от того, как размещаются прочие компоненты. Другими словами, блок с Position: fixed отправится в верхнюю часть страницы, прижмется к краю окна браузера, а прочие элементы займут его место в соответствии с потоком.

position css

Главная особенность фиксировано позиционированных элементов в том, что они могут перекрывать другие блоки и строки страницы. При скроллинге блок с Position: fixed будет будто бы оставаться на месте, не исчезая с экрана. Это полезно, если вам нужно сделать навигацию или аналогичный элемент, к которому пользователь всегда должен иметь доступ. Фиксированное позиционирование также применяется, если нужно разместить кнопку быстрого скроллинга в определенную часть страницы.

CSS Position: relative

Использование этого свойства называется относительным позиционированием. Если задать элементу свойство Position: relative, тот останется на своем месте. На первый взгляд, ничего особенного не произойдет, но все измениться, если дополнительно использовать свойства right/left и top/bottom. С их помощью можно управлять перемещением компонента относительно его местоположения. На том месте, где блок или строка были раньше, окажется пустое пространство – другие элементы останутся на своих положениях, не обращая внимания на освободившееся место.


css position absolute по центру

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

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

Один из самых интересных и наиболее часто используемых вариантов. При использовании свойства Position со значением absolute положение компонента страницы будет высчитываться относительно окна браузера. Прочие элементы (не являющиеся абсолютно позиционированными) словно «забудут» о существовании «собрата» с Position: absolute и займут его место в потоке. Казалось бы, все точно так же, как в случае с Position: fixed, но есть и серьезные различия.

position css примеры

Во-первых, положением элемента можно свободно управлять – для этого используются свойства top/right/bottom/left. Например, если вы зададите значение bottom: 100px, блок «оттолкнется» от нижней част страницы на 100 пикселей. Во-вторых, при скроллинге «абсолютный» компонент останется на своем месте, вместо того, чтобы перемещаться со страницей.

Взаимодействие абсолютных блоков с родительскими элементами

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

Рассмотрим пример. У вас есть div с классом relative-div, внутри которого размещается div с классом absolute-div. Задаем внутреннему блоку свойство Position: absolute. Тот сразу же «вылетает» из потока и оказывается где-то вверху, ведь теперь его расположение просчитывается относительно окна браузера. Теперь задаем блоку с классом relative-div свойство Position: relative и «блудный сын» возвращается на место. Почти. На самом деле, он оказывается в верхнем левом углу родительского элемента.

свойство position в css

Почему так происходит? Дело в специфике свойства Position: absolute. По умолчанию его положение зависит от окна браузера, но если «родитель» тоже позиционирован как-то кроме static, позиция начинает зависеть от родительского элемента. Это очень удобно, потому что можно разместить компонент в любом месте, не просчитывая огромные цифры относительно окна браузера. Прием часто используется для размещения иконок, кнопок и других небольших элементов.

Position CSS по центру

Одна из главных трудностей новичков состоит в том, чтобы центрировать элемент вертикально и горизонтально. Грамотно используя свойство Position, сделать это проще простого. CSS Position: absolute по центру устанавливается следующим образом. Допустим, у вас есть div с классом absolute-div, который находится в «диве» с классом relative-div. «Родитель» позиционирован относительно и его ширина равна ширине всей страницы. «Потомок» имеет ширину и высоту 400 px, абсолютное позиционирование и по умолчанию располагается в верхнем левом углу родительского элемента.

position css по центру

Все, что нужно сделать – это задать абсолютному компоненту top: 50 % и left: 50 %. Почти готово! Absolute-div сдвинулся с места и оказался почти в центре, но не совсем. Середины «родителя» касаются его края, а нам нужно, чтобы в центре блока оказался центр «потомка». Для этого нужно задать ему margin-left и margin-right со значениями -200 px. Тем самым мы сместим абсолютно позиционированный блок на половину его высоты и ширины. Все, он в центре!

Перекрывание компонентов

Проблемой может стать непростое, на первый взгляд, «наложение» позиционированных элементов на их «соседей». Например, компонент с Position: fixed будет перекрывать все, что расположено на странице. Исправить ситуацию можно с помощью свойства z-index, однако помните, что оно работает только для позиционированных элементов. Соответственно, если вы хотите размещать блок поверх фиксировано позиционированного элемента, этому блоку придется также задать позиционирование. Например, относительное.

Лучший способ освоить позиционирование – рассматривать примеры Position CSS, экспериментировать и пробовать что-то свое. Постарайтесь научиться использовать его в сочетании с функцией calc() – это даст возможность более гибко настраивать расположение. Однако помните, что это свойство не предназначено для выстраивания всей «сетки» страницы. С его помощью нужно перемещать относительно небольшие элементы, иначе можно слишком легко запутаться.

Position Relative - определение. Подробное описание
В чем вся "соль" каскадных таблиц стилей? Может ли свойство Position иметь несколько значений? Как правильно сделать бегущую строку на CSS, не испортив всю страницу? На эти, а также некоторые другие вопросы мы ответим в нашей статье.
далее
Свойство CSS opacity: управление прозрачностью
Изменение прозрачности элементов с помощью свойства CSS opacity. Примеры использования, интервал возможных значений, наследование. Управление прозрачностью дочерних узлов. Взаимодействие с невидимыми блоками. Другие CSS-свойства, влияющие на ...
далее
NBSP - определение. Пустое место, имеющее значение
Слова всегда отделяются друг от друга, поскольку иначе они составляют единое целое. Синтаксис HTML-страницы по многим причинам не может обращать внимание на количество пробелов. Это касается как тегов, так и JavaScript-кода. Все браузеры оставляют ...
далее
Отступ сверху CSS: позиционирование контента
Вариантов верстки может быть множество. Одни разработчики предпочитают абсолютное позиционирование, другие - относительное, третьи - в восторге от идей резиновой верстки. В любом случае, разумное размещение контента на странице предполагает умение ...
далее
Box-sizing в CSS: вычисление размеров блока
Блочная модель CSS, определение реального размера элемента. Область рамки, внутренних отступов и контента. Изменение алгоритма вычисления размеров с помощью свойства CSS box-sizing. Возможные значения и примеры использования.
далее
CSS transitions: примеры анимации фона, текста, примеры затухающего fade-out текста
Анимация на сайте с помощью css transition, плавный переход цвета фона и шрифта, затухание текста с помощью CSS, как на новостных сайтах, полупрозрачность текста и фона с использованием свойств opacity, gradient или mask, простые и полезные примеры для большинства случаев использования.
далее
CSS transitions: примеры анимации фона, текста, примеры затухающего fade-out текста
Функция rotate в CSS: двумерное вращение элемента
Функция rotate() в CSS осуществляет над элементом двумерную трансформацию вращения вокруг неподвижного центра. Блок при этом не деформируется и не влияет на положение соседних HTML-контейнеров. Метод позволяет указать угол поворота. Кроме того, существует возможность задать произвольный центр вращения.
далее
Функция rotate в CSS: двумерное вращение элемента
Background HTML: определение
Фон является важной частью веб-страницы. По умолчанию он имеет белый цвет. Но язык HTML предоставляет несколько вариантов изменения его свойств. В интернете большинство сайтов — с красочным фоном, в том числе с анимацией. На них присутствует различная графика или фоновые изображения. Настройка стиля фона для веб-сайтов осуществляется с помощью атрибута background в HTML. Сделать это можно при помощи CSS или тега <style>.
далее
Background HTML: определение
Overflow CSS: отображение содержания элемента
Не только появление мобильных устройств привело к необходимости контролировать содержание элементов, любой квалифицированный разработчик практикует управление каждым элементом страницы сайта.
далее
Overflow CSS: отображение содержания элемента
CSS Float: краткое описание, свойства
Статья посвящена работе свойства Float. Рассказывается о том, как его использовать максимально эффективно и с какими проблемами можно при этом столкнуться.
далее
CSS Float: краткое описание, свойства