HTML Lesson Repository
Grid - сетка Должно быть ограничение по ширине (и по высоте, но не обязательно) grid-template: настройка сетки
grid-column-start: (1...n столбцов) начальный столбец в котором элемент. grid-column-end: (нужный столбец + 1) конечный столбец, в котором элемент. grid-column-end: span n - протяжение столбцов n от grid-column-start.
grid-column: 2 / 4 -- сочетание start (2) и end (4).
grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end -- сокращение всего.
Все также, как и с flex: order: (0 - ничего, -1 - влево, +1 - вправо).
repeat(кол-во, значение).
1fr, 5fr -- 1/6 от размера, 5/6 от размера, 6 идет от 1 + 5.
grid-template: grid-template-rows / grid-template-columns -- сокращение.
Все элементы по умолчанию имеют position: static
Как страница навёрстана, так и идут элементы.
Не работает top, bottom, right, left
Элемент позиционируется не относительно элементов, а относительно body.
Данный элемент никаким образом не сдвигает вёрстку.
Доступны top, bottom, right, left ТОЛЬКО ОДИН ИЗ НИХ, обычно относительно ближайшего края.
Можно двигать как угодно, смещает остальные элементы.
Смотрит, относительно какого элемента он должен позиционироваться, обычно доходит до body, если не найдет элементов с position: relative раньше. Если надо позиционировать элемент относительно родителя, то родитель должен имет position: relative, если выше родителя, то элемент-ориентир должен иметь position: relative.
position: fixed не требует position: relative, position: absolute, работает относительно страницы, т.е., body. Часто используется для модальных окон. Позиционируется поверх всего, но при этом работает scroll. Обычно с контентом сзади делают что-то, чтобы сделать окно более видимым. Позиция фиксирована относительно страницы. Обычно scroll запрещают.
Элемент, который следует за scroll во время него. Примеры: навигационные панели, кнопки связи с поддержкой, и т.д., и т.п. Грубо говоря, прилепляет элемент к определённой позиции, относительно viewport. position: sticky всегда должен быть ограничен по высоте height, иначе он растянется на всю страницу (или же на весь контейнер).
НЕОБХОДИМО ОБЯЗАТЕЛЬНО ПРОПИСАТЬ ПОЗИЦИЮ (top, bottom, left, right).