Свойство position

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

position: static

Статическое позиционирование производится по умолчанию, в том случае, если свойство position не указано.

Его можно также явно указать через CSS-свойство:

Такая запись встречается редко и используется для переопределения других значений position .

Здесь и далее, для примеров мы будем использовать следующий документ:

В этом документе сейчас все элементы отпозиционированы статически, то есть никак.

Элемент с position: static ещё называют не позиционированным.

position: relative

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

Для того, чтобы применить относительное позиционирование, необходимо указать элементу CSS-свойство position: relative и координаты left/right/top/bottom .

Этот стиль сдвинет элемент на 10 пикселей относительно обычной позиции по вертикали:

Координаты

Для сдвига можно использовать координаты:

• top – сдвиг от «обычной» верхней границы
• bottom – сдвиг от нижней границы
• left – сдвиг слева
• right – сдвиг справа

Не будут работать одновременно указанные top и bottom , left и right . Нужно использовать только одну границу из каждой пары.

Возможны отрицательные координаты и координаты, использующие другие единицы измерения. Например, left: 10% сдвинет элемент на 10% его ширины вправо, а left: -10% – влево. При этом часть элемента может оказаться за границей окна:

Свойства left/top не будут работать для position:static . Если их все же поставить, браузер их проигнорирует. Эти свойства предназначены для работы только с позиционированными элементами.

position: absolute

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

1. Элемент исчезает с того места, где он должен быть и позиционируется заново. Остальные элементы, располагаются так, как будто этого элемента никогда не было.
2. Координаты top/bottom/left/right для нового местоположения отсчитываются от ближайшего позиционированного родителя, т.е. родителя с позиционированием, отличным от static . Если такого родителя нет – то относительно документа.

• Ширина элемента с position: absolute устанавливается по содержимому. Детали алгоритма вычисления ширины описаны в стандарте.
• Элемент получает display:block , который перекрывает почти все возможные display (см. Relationships between „display“, „position“, and „float“).

Например, отпозиционируем заголовок в правом-верхнем углу документа:

Важное отличие от relative : так как элемент удаляется со своего обычного места, то элементы под ним сдвигаются, занимая освободившееся пространство. Это видно в примере выше: строки идут одна за другой.

Так как при position:absolute размер блока устанавливается по содержимому, то широкий Заголовок «съёжился» до прямоугольника в углу.

Иногда бывает нужно поменять элементу position на absolute , но так, чтобы элементы вокруг не сдвигались. Как правило, это делают, меняя соседей – добавляют margin/padding или вставляют в документ пустой элемент с такими же размерами.

В абсолютно позиционированном элементе можно одновременно задавать противоположные границы.

Браузер растянет такой элемент до границ.

Как растянуть абсолютно позиционированный блок на всю ширину документа?

Первое, что может прийти в голову:

Но это будет работать лишь до тех пор, пока у страницы не появится скроллинг!

Прокрутите вниз ифрейм:

Вы увидите, что голубой фон оканчивается задолго до конца документа.

Дело в том, что в CSS 100% относится к ширине внешнего блока («containing block»). А какой внешний блок имеется в виду здесь, ведь элемент изъят со своего обычного места?

В данном случае им является так называемый (««initial containing block»»), которым является окно, а не документ.

То есть, координаты и ширины вычисляются относительно окна, а не документа.

Может быть, получится так?

С виду логично, но нет, не получится!

Координаты top/right/left/bottom вычисляются относительно окна. Значение bottom: 0 – нижняя граница окна, а не документа, блок растянется до неё. То есть, будет то же самое, что и в предыдущем примере.

position: absolute в позиционированном родителе

Если у элемента есть позиционированный предок, то position: absolute работает относительно него, а не относительно документа.

То есть, достаточно поставить родительскому div позицию relative , даже без координат – и заголовок будет в его правом-верхнем углу, вот так:

Нужно пользоваться таким позиционированием с осторожностью, т.к оно может перекрыть текст. Этим оно отличается от float .

Используем position для размещения элемента управления:

Часть текста перекрывается. Кнопка более не участвует в потоке.

Используем float для размещения элемента управления:

Браузер освобождает место справа, текст перенесён. Кнопка продолжает находиться в потоке, просто сдвинута.

position: fixed

Это подвид абсолютного позиционирования.

Позиционирует объект точно так же, как absolute , но относительно window .

Разница в нескольких словах:

Когда страницу прокручивают, фиксированный элемент остаётся на своём месте и не прокручивается вместе со страницей.

В следующем примере, при прокрутке документа, ссылка #top всегда остаётся на своём месте.

Итого

Виды позиционирования и их особенности.

static Иначе называется «без позиционирования». В явном виде задаётся только если надо переопределить другое правило CSS. relative Сдвигает элемент относительно текущего места.

• Противоположные границы left/right ( top/bottom ) одновременно указать нельзя.
• Окружающие элементы ведут себя так, как будто элемент не сдвигался.

absolute

Визуально переносит элемент на новое место.

Новое место вычисляется по координатам left/top/right/bottom относительно ближайшего позиционированного родителя. Если такого родителя нет, то им считается окно.

• Ширина элемента по умолчанию устанавливается по содержимому.
• Можно указать противоположные границы left/right ( top/bottom ). Элемент растянется.
• Окружающие элементы заполняют освободившееся место.

fixed

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

При прокрутке он остаётся на том же месте.

Почитать

CSS-позиционирование по-настоящему глубоко в спецификации Visual Formatting Model, 9.3 и ниже.

Ещё есть хорошее руководство CSS Positioning in 10 steps, которое охватывает основные типы позиционирования.

Задачи

Модальное окно

Создайте при помощи HTML/CSS «модальное окно», то есть DIV , который полностью перекрывает документ и находится над ним.

При этом все элементы управления на документе перестают работать, т.к. клики попадают в DIV .

В примере ниже DIV’у дополнительно поставлен цвет фона и прозрачность, чтобы было видно перекрытие:

Браузеры: все основные, IE8+. Должно работать при прокрутке окна (проверьте).

Если использовать position: absolute , то DIV не растянется на всю высоту документа, т.к. координаты вычисляются относительно окна.

Можно, конечно, узнать эту высоту при помощи JavaScript, но CSS даёт более удобный способ. Будем использовать position:fixed :

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

Element Position Class

Definition

Represents the base class for many visual elements of the chart such as the legend, title, and chart areas. Defines the position of the chart element in relative coordinates, which range from (0,0) to (100,100).

Remarks

The ElementPosition class is used to define the position of a chart element, and represents one rectangle using the X, Y, Width and Height properties.

The ElementPosition class is always exposed as a Position property, such as Position, Position, and so forth. It is also exposed in the PrePaint and PostPaint events of the Chart control as a property of the ChartPaintEventArgs object.

The position of the applicable chart elements can be set automatically by setting the Auto property to true ; chart elements can also be positioned at design time in the Design View.

There are two major differences between this class and a RectangleF structure:

This class can use automatic positioning.

This class only uses coordinates ranging from 0 to 100, otherwise an exception is thrown.

The position of chart elements is described using relative coordinates, with the top-left corner of an element having coordinates of (0,0) and the bottom-right corner of an element having coordinates of (100,100).

Elements that are plotted within a chart area use coordinates that are relative to the chart area, whereas elements outside a chart area use coordinates that are relative to the chart image.

Constructors

Initializes a new instance of the ElementPosition class.

Initializes a new instance of the ElementPosition class with the specified x , y , width and height parameters.

Properties

Gets or sets a value that indicates whether an applicable chart element will be positioned automatically by the Chart control.

Gets the bottom position of a chart element, in relative coordinates.

Gets or sets the height of a chart element.

Gets the position of the right side of a chart element, in relative coordinates.

Gets the size of a chart element.

Gets or sets an object associated with this chart element.

(Inherited from ChartElement) Width

Gets or sets the width of a chart element.

Gets or sets the relative X-coordinate of the top-left corner of an applicable chart element.

Gets or sets the relative Y-coordinate of the top-left corner of an applicable chart element.

Methods

Releases the resources used by the ChartElement.

(Inherited from ChartElement) Dispose(Boolean)

Releases the unmanaged resources used by the ChartElement and optionally releases the managed resources.

(Inherited from ChartElement) Equals(Object)

Determines whether the specified Object is equal to the current ChartElement.

(Inherited from ChartElement) FromRectangleF(RectangleF)

Initializes an ElementPosition object from a RectangleF structure.

Returns a hash function for a particular type.

(Inherited from ChartElement) GetType()

Gets the Type of the current instance.

(Inherited from Object) MemberwiseClone()

Creates a shallow copy of the current Object.

(Inherited from Object) ToRectangleF()

Returns a RectangleF object that uses the coordinates of an ElementPosition object.

Returns a string that represents the current Object.

Element Position Класс

Определение

Представляет базовый класс для многих визуальных элементов диаграммы, например легенды, заголовка и областей диаграммы. Represents the base class for many visual elements of the chart such as the legend, title, and chart areas. Определяет положение элемента диаграммы в относительных координатах, лежащих в диапазоне от (0,0) до (100,100). Defines the position of the chart element in relative coordinates, which range from (0,0) to (100,100).

Комментарии

ElementPositionКласс используется для определения расположения элемента диаграммы и представляет один прямоугольник с помощью X Y свойств, Width и Height . The ElementPosition class is used to define the position of a chart element, and represents one rectangle using the X, Y, Width and Height properties.

ElementPositionКласс всегда предоставляется как Position свойство, например Position , Position и т. д. The ElementPosition class is always exposed as a Position property, such as Position, Position, and so forth. Он также предоставляется в PrePaint PostPaint событиях и Chart элемента управления как свойство ChartPaintEventArgs объекта. It is also exposed in the PrePaint and PostPaint events of the Chart control as a property of the ChartPaintEventArgs object.

Позиции применимых элементов диаграммы можно задать автоматически, задав Auto для свойства значение true ; элементы диаграммы также можно располагать во время разработки в режиме конструктора. The position of the applicable chart elements can be set automatically by setting the Auto property to true ; chart elements can also be positioned at design time in the Design View.

Существует два основных различия между этим классом и RectangleF структурой. There are two major differences between this class and a RectangleF structure:

Этот класс может использовать автоматическое позиционирование. This class can use automatic positioning.

Этот класс использует координаты только в диапазоне от 0 до 100, в противном случае создается исключение. This class only uses coordinates ranging from 0 to 100, otherwise an exception is thrown.

Расположение элементов диаграммы описывается с помощью относительных координат, а левый верхний угол элемента имеет координаты (0, 0) и правый нижний угол элемента с координатами (100 100). The position of chart elements is described using relative coordinates, with the top-left corner of an element having coordinates of (0,0) and the bottom-right corner of an element having coordinates of (100,100).

Элементы, которые отображаются в области диаграммы, используют координаты относительно области диаграммы, а элементы за пределами области диаграммы используют координаты относительно изображения диаграммы. Elements that are plotted within a chart area use coordinates that are relative to the chart area, whereas elements outside a chart area use coordinates that are relative to the chart image.

Конструкторы

Инициализирует новый экземпляр класса ElementPosition. Initializes a new instance of the ElementPosition class.

Инициализирует новый экземпляр класса ElementPosition с заданными параметрами x , y , width и height . Initializes a new instance of the ElementPosition class with the specified x , y , width and height parameters.

Свойства

Получает или задает значение, указывающее, располагается ли соответствующий элемент диаграммы автоматически элементом управления Chart. Gets or sets a value that indicates whether an applicable chart element will be positioned automatically by the Chart control.

Получает нижнее положение элемента диаграммы в относительных координатах. Gets the bottom position of a chart element, in relative coordinates.

Получает или задает высоту элемента диаграммы. Gets or sets the height of a chart element.

Получает положение правой стороны элемента диаграммы в относительных координатах. Gets the position of the right side of a chart element, in relative coordinates.

Получает размер элемента диаграммы. Gets the size of a chart element.

Получает или задает объект, связанный с данным элементом диаграммы. Gets or sets an object associated with this chart element.

(Унаследовано от ChartElement) Width

Получает или задает ширину элемента диаграммы. Gets or sets the width of a chart element.

Получает или задает относительную координату по оси X левого верхнего угла соответствующего элемента диаграммы. Gets or sets the relative X-coordinate of the top-left corner of an applicable chart element.

Получает или задает относительную координату по оси Y левого верхнего угла соответствующего элемента диаграммы. Gets or sets the relative Y-coordinate of the top-left corner of an applicable chart element.

Методы

Освобождает ресурсы, используемые объектом ChartElement. Releases the resources used by the ChartElement.

(Унаследовано от ChartElement) Dispose(Boolean)

Освобождает неуправляемые ресурсы, используемые объектом ChartElement, а при необходимости освобождает также управляемые ресурсы. Releases the unmanaged resources used by the ChartElement and optionally releases the managed resources.

(Унаследовано от ChartElement) Equals(Object)

Определяет, равен ли указанный экземпляр Object текущему экземпляру ChartElement. Determines whether the specified Object is equal to the current ChartElement.

(Унаследовано от ChartElement) FromRectangleF(RectangleF)

Инициализирует объект ElementPosition из структуры RectangleF. Initializes an ElementPosition object from a RectangleF structure.

Возвращает хэш-функцию для определенного типа. Returns a hash function for a particular type.

(Унаследовано от ChartElement) GetType()

Возвращает объект Type для текущего экземпляра. Gets the Type of the current instance.

(Унаследовано от Object) MemberwiseClone()

Создает неполную копию текущего объекта Object. Creates a shallow copy of the current Object.

(Унаследовано от Object) ToRectangleF()

Возвращает объект RectangleF, использующий координаты объекта ElementPosition. Returns a RectangleF object that uses the coordinates of an ElementPosition object.

Возвращает строку, которая представляет текущий объект Object. Returns a string that represents the current Object.