Изучите CSS Position через игру
Вы двигаете маленький блок к цели, задавая свойства position, top и left. Написанное сразу отображается вживую.
Задача: Поместите блок в правый нижний угол
Посмотрите каждый тип position через живую анимацию. Разобравшись, перейдите к «Практике» выше и потренируйтесь, написав код самостоятельно.
Состояние по умолчанию
Каждый элемент изначально имеет static и стоит в обычном потоке. В этом состоянии top, left, right, bottom вообще не работают. Чтобы их использовать, сначала нужно задать другой position.
/* не двигается */ position: static; top: 30px; /* игнорируется */
Смещается со своего места
Элемент relative смещается со своего обычного места, но занимаемое место сохраняет за собой, соседние элементы не сдвигаются (серый блок не сдвинулся).
position: relative; top: 30px; /* вниз */ left: 40px; /* вправо */
Четыре направления
Эти свойства двигают элемент от краёв: top сверху (вниз), left слева (вправо), а right и bottom — от противоположного края. Отрицательное значение двигает в обратную сторону.
top: 20px; right: 20px; bottom: 20px; left: 20px;
Выходит из потока
absolute полностью выводит элемент из потока (соседи заполняют освободившееся место) и размещает его относительно ближайшего позиционированного родителя. Используется для точного крепления к краям.
position: absolute; top: 0; right: 0; /* вверх-вправо */
Относительно кого?
Элемент absolute привязывается к ближайшему родителю (у которого position не static). Если задать родителю relative, он становится «контекстом», и потомок располагается внутри этого блока.
.ota { position: relative; } .bola { position: absolute; top: 0; right: 0; }
Прикрепляется к экрану
fixed прикрепляет элемент к окну экрана. Сколько бы страница ни прокручивалась, он остаётся застывшим на одном месте. Так делают всегда видимую кнопку чата, кнопку «наверх».
position: fixed; bottom: 16px; right: 16px;
Прилипает при прокрутке
sticky — смесь relative и fixed. Элемент стоит как обычно, пока не начнётся прокрутка, а достигнув заданного места, прилипает. Так делают заголовки разделов и меню.
position: sticky; top: 0;
Порядок наложения
Когда элементы накладываются друг на друга, z-index задаёт порядок: элемент с большим значением виден спереди. Важно: он работает только на позиционированном (не static) элементе.
position: relative; z-index: 10; /* вперёд */
Готовы?
Теперь проверьте знания: в практике из 16 уровней вы сами пишете код и двигаете блок к цели.
Отлично!
Блок попал в цель.