ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ
×

CSS учебник

CSS HOME CSS Introduction CSS Syntax CSS How To CSS Colors CSS Backgrounds CSS Borders CSS Margins CSS Padding CSS Height/Width CSS Box Model CSS Outline CSS Text CSS Fonts CSS Icons CSS Links CSS Lists CSS Tables CSS Display CSS Max-width CSS Position CSS Overflow CSS Float CSS Inline-block CSS Align CSS Combinators CSS Pseudo-class CSS Pseudo-element CSS Opacity CSS Navigation Bar CSS Dropdowns CSS Image Gallery CSS Image Sprites CSS Attr Selectors CSS Forms CSS Counters CSS Website Layout CSS Units CSS Specificity

CSS Advanced

CSS Rounded Corners CSS Border Images CSS Backgrounds CSS Colors CSS Gradients CSS Shadows CSS Text Effects CSS Web Fonts CSS 2D Transforms CSS 3D Transforms CSS Transitions CSS Animations CSS Tooltips CSS Style Images CSS object-fit CSS Buttons CSS Pagination CSS Multiple Columns CSS User Interface CSS Variables CSS Box Sizing CSS Flexbox CSS Media Queries CSS MQ Examples

CSS Responsive

RWD Intro RWD Viewport RWD Grid View RWD Media Queries RWD Images RWD Videos RWD Frameworks

CSS Grid

Grid Intro Grid Container Grid Item

CSS Examples

CSS Templates

CSS References

CSS Reference CSS Selectors CSS Functions CSS Reference Aural CSS Web Safe Fonts CSS Animatable CSS Units CSS PX-EM Converter CSS Colors CSS Color Values CSS Default Values CSS Browser Support


CSS Layout - The position Property


Свойство position указывает тип метода позиционирования, используемого для элемента (статический, относительный, фиксированный, абсолютный или липкий).


Свойство Position

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

Существует пять различных значений позиции:

  • static
  • relative
  • fixed
  • absolute
  • sticky

Затем элементы раздаются с помощью свойств "верх", "снизу", "влево" и "вправо". Однако эти свойства не будут работать, если только свойство position не задано первым. Они также работают по-разному в зависимости от значения положения.


позиция: статическая;

Элементы HTML по умолчанию позиционируют статический.

На статические позиционные элементы не влияют верхние, нижние, левые и правые свойства.

Элемент с position: static; не позиционируется каким-либо особым образом; он всегда позиционируется в соответствии с нормальным потоком страницы:

Этот элемент <div> имеет позицию: Static;

Вот CSS, который используется:

Пример

div.static {
    position: static;
    border: 3px solid #73AD21;
}

позиция: относительная;

Элемент с position: relative; располагается относительно его нормального положения.

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

Этот элемент <div> имеет положение: относительный;

Вот CSS, который используется:

Пример

div.relative {
    position: relative;
    left: 30px;
    border: 3px solid #73AD21;
}


позиция: фиксированная;

Элемент с position: fixed; располагается относительно видового экрана, что означает, что он всегда остается в том же месте, даже если страница прокручивается. Свойства сверху, справа, снизу и слева используются для размещения элемента.

Фиксированный элемент не оставляет зазора на странице, где он обычно находился.

Обратите внимание на фиксированный элемент в правом нижнем углу страницы. Вот CSS, который используется:

Пример

div.fixed {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 300px;
    border: 3px solid #73AD21;
}
This <div> element has position: fixed;

позиция: абсолютная;

Элемент с position: absolute; располагается относительно ближайшего расположенного предка (вместо расположения относительно видового экрана, например "фиксированный").

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

Примечание: "позиционируется" элемент, позиция которого является чем-либо, кроме static .

Вот простой пример:

Этот элемент <div> имеет положение: относительный;
Этот элемент <div> имеет положение: абсолютный;

Вот CSS, который используется:

Пример

div.relative {
    position: relative;
    width: 400px;
    height: 200px;
    border: 3px solid #73AD21;
}

div.absolute {
    position: absolute;
    top: 80px;
    right: 0;
    width: 200px;
    height: 100px;
    border: 3px solid #73AD21;
}

позиция: липкий;

Элемент с position: sticky; располагается на основе позиции прокрутки пользователя.

Липкий элемент переключает между relative и fixed, в зависимости от положения прокрутки. Он позиционируется относительно до тех пор, пока в видовом экране не будет выполнено положение смещения, после чего оно "вставляется" (например, положение: фиксированное).

Примечание: Internet Explorer, EDGE 15 и более ранние версии не поддерживают липкое позиционирование. Safari требует a-WebKit-префикс (см. пример ниже). Вы также должны указать по крайней мере один из top, right, bottom или left для липкого позиционирования для работы.

В этом примере липкий элемент вставляется в верхнюю часть страницы ( top: 0 ), когда вы достигаете его положение прокрутки.

Пример

div.sticky {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    background-color: green;
    border: 2px solid #4CAF50;
}

Перекрывающиеся элементы

При позиционировании элементов они могут перекрывать другие элементы.

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

Элемент может иметь положительный или отрицательный порядок стека:

This is a heading

Because the image has a z-index of -1, it will be placed behind the text.

Пример

img {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}

Элемент с большим порядком стека всегда находится перед элементом с более низким порядком стека.

Примечание: Если два позиционных элемента перекрываются без заданного z-index, то элемент, расположенный последним в HTML-коде, будет отображаться сверху.


Размещение текста в изображении

Как разместить текст над изображением:

Пример

Norway
Bottom Left
Top Left
Top Right
Bottom Right
Centered

Попробуйте сами:


Другие примеры

Задание формы элемента
В этом примере демонстрируется установка формы элемента. Элемент обрезается в эту фигуру и отображается.



Все свойства позиционирования CSS

Свойство Описание
bottom Задание нижнего края поля для позиционного прямоугольника
clip Зажимы абсолютно позиционированного элемента
left Задание левого края поля для позиционного прямоугольника
position Определяет тип позиционирования для элемента
right Устанавливает правый край поля для позиционного прямоугольника
top Задание верхнего края поля для позиционного прямоугольника
z-index Задает порядок стека элемента