Document

## Свойство position Свойство CSS `position` - это мощный инструмент, который позволяет разработчикам точно контролировать расположение элементов на странице. Это позволяет размещать элементы в соответствии с их нормальным потоком, относительно их родительского элемента, относительно viewport или относительно их ближайшего прокручивающегося предка. ##### Статическое позиционирование `static` - это значение по умолчанию для всех элементов, что означает, что элементы располагаются в соответствии с нормальным документо-типом. Элементы с статическим позиционированием не受影响 свойствами top, right, bottom или left. Когда вы хотите, чтобы элементы следовали стандартному потоку, статическое позиционирование - ваш лучший выбор. Например, есть изображение робота слева от страницы, и если мы установим этот элемент в `position:static`, то при прокрутке страницы это изображение также будет прокручиваться вместе с потоком страницы. ```html Document

``` ![Пример статического позиционирования робота](https://file.labex.io/namespace/df87b950-1f37-4316-bc07-6537a1f2c481/css/lab-grid-layout/ru/../assets/part-3.gif) ##### Фиксированное позиционирование `fixed` позиционирование размещает элемент относительно viewport браузерного окна. Элемент останется на том же месте, даже если страница прокручивается. Для создания навигационной панели, которая фиксирована вверху или внизу страницы. Например, есть изображение робота слева от страницы, если мы установим этот элемент в `position:fixed`, то при прокрутке страницы это изображение не исчезнет из-за прокрутки страницы, изображение будет находится в фиксированном положении. ```css Document

``` ![Пример фиксированного позиционирования робота](https://file.labex.io/namespace/df87b950-1f37-4316-bc07-6537a1f2c481/css/lab-grid-layout/ru/../assets/part-4.gif) ##### Относительное позиционирование `relative` позиционирование позволяет смещать элемент относительно его нормального положения. Даже при смещении элемент по-прежнему занимает свое исходное пространство. Когда вам нужно немного изменить положение элемента, не влияя на другие части макета. Например, мы сдвинули изображение робота слева от страницы на заданное количество пикселей в направлениях `top` и `left` относительно его нормального положения. ```html Document

``` ![Изображение робота с относительным позиционированием](https://file.labex.io/namespace/df87b950-1f37-4316-bc07-6537a1f2c481/css/lab-grid-layout/ru/../assets/part-5.png) ##### Абсолютное позиционирование `absolute` позиционирование делает элемент позиционируемым относительно его ближайшего позиционированного предка, если таковой имеется, или иначе относительно начального содержащего блока. Он удаляется из документационного потока и не занимает места. Когда вам нужно создать плавающий элемент, такой как модальное окно или выпадающее меню. ```html Document

``` ![Пример абсолютного позиционирования](https://file.labex.io/namespace/df87b950-1f37-4316-bc07-6537a1f2c481/css/lab-grid-layout/ru/../assets/part-6.png) После того, как вы поймете использование атрибута position, мы можем добавить следующее в `style.css`: ```css header { position: fixed; display: flex; flex-direction: row; background-color: rgb(233, 174, 87); width: 100%; max-height: max-content; min-height: 1em; padding-top: 1%; padding-bottom: 1%; text-transform: uppercase; } .navigation li { position: relative; display: inline-block; } .service figure { position: relative; } .service figcaption { position: absolute; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.5); color: #fff; padding: 10px; } ```