Позиционирование CSS

Свойства позиционирования CSS (Positioning) позволяют вам позиционировать элементы.

CSS позиционирование и плавающее форматирование

CSS предоставляет了一些属性 для позиционирования и плавающего форматирования, с помощью которых можно создать линейный макет,重叠 часть макета с другой частью и выполнить задачи, которые в течение многих лет обычно выполнялись с использованием нескольких таблиц.

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

С другой стороны, CSS1 впервые предложил плавающее форматирование, основанное на функции, добавленной Netscape в начале развития Интернета. Плавающее форматирование не является полным позиционированием, но, конечно, это также не нормальное потоковое форматирование. Мы будем明确了解浮动的含义。

一切皆为框

Все является рамкойЭлементы div, h1 или p часто называют блочными элементами. Это означает, что эти элементы отображаются какОдна блоковая информация

т.е. «блочная рамка». Напротив, элементы span и strong и т.д. называются «строковыми элементами», так как их содержимое отображается в строке, т.е. в «строковой рамке». Вы можете использоватьСвойство display

Изменение типа генерируемых рамок. Это означает, что, установив значение свойства display в block, можно сделать строковые элементы (например, элемент <a>) вести себя как блочные элементы. Также можно установить display в none, чтобы созданный элемент вообще не имел рамки. В этом случае рамка и все её содержимое не будут отображаться и не займут места в документе.

Но в одном случае, даже без явного определения, создается блочный элемент. Это происходит, когда к началу блочного элемента (например, div) добавляется некоторый текст. Даже если эти тексты не определены как абзацы, они будут рассматриваться как абзацы:
<div>
Некоторые строки текста
<p>Ещё несколько строк текста.</p>

</div>

В этом случае рамка называется неопределенной рамкой блока, так как она не связана с特意 определенными элементами.

Текстовые строки блочных элементов также могут发生变化. Предположим, что у нас есть абзац, содержащий три строки текста. Каждая строка текста образует неопределенный блок. Непосредственно к неопределенным блокам или строковым рамкам применить стиль невозможно,因为没有 места для применения стиля (обратите внимание, что строковая рамка и строковый блок - это два разных понятия). Однако, это помогает понять, что все, что мы видим на экране, образует某种 рамку.

Механизмы позиционирования CSS

CSS имеет три основных механизма позиционирования: нормальный поток,浮动 и абсолютное позиционирование.

Блочные рамки выстраиваются друг за другом сверху вниз, а вертикальное расстояние между рамками рассчитывается на основе их вертикального внешнего поля. Unless specifically specified, all frames are positioned in the normal flow. This means that the position of elements in the normal flow is determined by their position in (X)HTML.

Строковые рамки выстраиваются в水平ном положении в строке. Их расстояние можно регулировать с помощью горизонтального внутреннего поля, рамки и внешнего поля. Однако, вертикальное внутреннее поле, рамка и внешнее поле не влияют на высоту строковой рамки. Уровень, образованный строкой, называетсяСтроковая рамка (Line Box)Высота строковой рамки всегда достаточна для容纳 все строки, содержащиеся в ней. Однако, настройка высоты строки может увеличить высоту этой рамки.

В следующих разделах мы подробно объясним относительное позиционирование, абсолютное позиционирование и浮动.

Атрибут position CSS

Используя Свойство positionМы можем выбрать 4 типа позиционирования, которые влияют на способ генерации рамки элемента.

Значение свойства position:

static
Элементные рамки генерируются normalmente. Блочные элементы создают прямоугольную рамку, являющуюся частью потока документа,而行内元素 создают один или несколько строковых рамок, которые размещаются в родительском элементе.
relative
Рамка элемента смещается на определенное расстояние. Элемент сохраняет свою форму до позиционирования, и занимаемое ею пространство сохраняется.
absolute
Рамка элемента полностью удаляется из потока документа и позиционируется относительно её содержащего блока. Содержащий блок может быть другим элементом в документе или начальным содержащим блоком. Пространство, занимаемое элементом в обычном потоке, закрывается, как будто элемента никогда не было. После позиционирования элемента создается блоковый фрейм, независимо от того,何种类型的 фрейм он генерировал в обычном потоке.
fixed
Внешний вид рамки элемента ähnelt dem, когда position налажен на absolute, но его содержащий блок — это само окно.

Совет:Относительное позиционирование фактически рассматривается как часть модели позиционирования обычного потока, так как положение элемента относительно его положения в обычном потоке.

Пример

Позиционирование: относительное позиционирование
Этот пример демонстрирует, как позиционировать элемент относительно его нормального положения.
Позиционирование: абсолютное позиционирование
Этот пример демонстрирует, как использовать абсолютные значения для позиционирования элементов.
Позиционирование: фиксированное позиционирование
Этот пример демонстрирует, как позиционировать элементы относительно окна браузера.
Установка верхнего края изображения с помощью фиксированного значения
Этот пример демонстрирует, как устанавливать верхний край изображения с помощью фиксированного значения.
Установка верхнего края изображения с помощью процента
Этот пример демонстрирует, как устанавливать верхний край изображения с помощью процента.
Установка нижнего края изображения с помощью пикселей
Этот пример демонстрирует, как устанавливать нижний край изображения с помощью пикселей.
Установка нижнего края изображения с помощью процента
Этот пример демонстрирует, как устанавливать нижний край изображения с помощью процента.
Установка левого края изображения с помощью фиксированного значения
Этот пример демонстрирует, как устанавливать левый край изображения с помощью фиксированного значения.
Установка левого края изображения с помощью процента
Этот пример демонстрирует, как устанавливать левый край изображения с помощью процента.
Установка правого края изображения с помощью фиксированного значения
Этот пример демонстрирует, как устанавливать правый край изображения с помощью фиксированного значения.
Установка правого края изображения с помощью процента
Этот пример демонстрирует, как устанавливать правый край изображения с помощью процента.
Как использовать полосы прокрутки для отображения содержимого, переполненного в элементе
Этот пример демонстрирует, как устанавливать атрибут overflow для определения соответствующего действия, когда содержимое элемента слишком велико, чтобы适应 заданную область.
Как скрыть содержимое переполнения в элементе
Этот пример демонстрирует, как устанавливать атрибут overflow для скрытия содержимого, когда содержимое элемента слишком велико, чтобы адаптироваться к заданной области.
Как устанавливать автоматическую обработку переполнения браузером
Этот пример демонстрирует, как устанавливать браузер для автоматического обработки переполнения.
Установка формы элементов
Этот пример демонстрирует, как устанавливать форму элементов. Этот элемент обрезается до этой формы и отображается.
Вертикальное выстраивание изображений
Этот пример демонстрирует, как вертикально выстраивать изображения в тексте.
Z-index
Z-index может быть использован для размещения одного элемента за другим.
Z-index
Элементы в примерах выше уже изменили Z-index.

Атрибуты позиционирования CSS

Атрибуты позиционирования CSS позволяют вам позиционировать элементы.

Атрибут Описание
position Поставить элемент в статическое, относительное, абсолютное или фиксированное положение.
top Определяет смещение верхнего внешнего края границ элемента позиционирования от верхнего края блока, содержащего его.
right Определяет смещение правого внешнего края границ элемента позиционирования от правого края блока, содержащего его.
bottom Определяет смещение нижнего внешнего края границ элемента позиционирования от нижнего края блока, содержащего его.
left Определяет смещение левого внешнего края границ элемента позиционирования от левого края блока, содержащего его.
overflow Установить, что происходит, когда содержимое элемента выходит за пределы его области.
clip Установить форму элементов. Элементы обрезаются по этой форме и затем отображаются.
vertical-align Установить вертикальное выравнивание элементов.
z-index Установить порядок叠放 элементов.