Урок14_Свойства position и css анимация

Свойство position указывает тип метода позиционирования, используемого для элемента (статический, относительный, фиксированный, абсолютный или фиксированный).
Существует пять различных значений положения:
static
relative
fixed
absolute
sticky
Затем элементы позиционируются с использованием свойств top, bottom, left и right. Однако эти свойства не будут работать, пока position свойство не будет задано первым. Они также работают по-разному в зависимости от значения позиции.

position: static;
Это значение position по умолчанию: статичные элементы просто следуют естественному потоку. Любые значения left, right, top или bottom не оказывают влияния.

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

position: fixed;
Элемент с position: fixed;позиционируется относительно окна просмотра, что означает, что он всегда остается на одном и том же месте, даже если страница прокручивается. Свойства top, right, bottom и left используются для позиционирования элемента.
Фиксированный элемент не оставляет зазора на странице там, где он обычно располагался бы.

position: absolute;
Элемент с position: absolute; позиционируется относительно ближайшего позиционированного предка (а не позиционируется относительно окна просмотра, как фиксированный).
Однако, если элемент с абсолютным позиционированием не имеет позиционированных предков, он использует тело документа и перемещается вместе с прокруткой страницы.
Примечание. Элементы с абсолютным позиционированием удаляются из обычного потока и могут перекрывать элементы.

position: sticky;
Элемент with position: sticky;позиционируется на основе позиции прокрутки пользователя.
Липкий элемент переключается между relative и fixed, в зависимости от положения прокрутки. Он позиционируется относительно до тех пор, пока в окне просмотра не встретится заданная позиция смещения — тогда он «застревает» на месте (как например, position:fixed).

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

CSS position - https://fls.guru/cssposition.html
CSS transition - https://fls.guru/csstransition.html
CSS transform - https://fls.guru/transform.html
CSS animation & @keyframes - https://fls.guru/cssanimation.html