CSS place — один из самых мощных инструментов, позволяющий размещать различные элементы в системе координаторов, давая свободу в дизайне и преодолевая привычные решения.
Когда браузер загружает сайт, детали (заголовки, строки, абзацы, блоки div и т.д.) отображаются в том порядке, в котором они появляются в разметке HTML-документа. Установка организует процесс отображения всех элементов на странице сайта.
Типы позиционирования в CSS
В HTML каждый элемент представляет собой своего рода прямоугольник, с внешними и внутренними углублениями и разделяющими их границами, которые необходимо определить.
Схема монтажа определяет, где размещается этот прямоугольник и как он влияет на окружающие его элементы.
Свойство position может принимать пять значений в CSS.
- Похожие,.
- Абсолют,.
- Унаследовано.
- Модифицированный, и
- Статика.
Все детали на сайте по умолчанию размещаются статически. Это означает, что каждый элемент размещается на странице в соответствии с его физическим порядком. Блочные элементы размещаются под блочными элементами, а элементы нижнего регистра — друг над другом.
Абсолютное размещение.
Этот тип вложений удаляет элементы из общего потока документа. Элементы, окружающие их, игнорируются, как если бы они были назначены дисплею.
Если вы не хотите, чтобы пространство было заполнено другими элементами, вы должны определить свойства left, right, bottom и top, чтобы задать абсолютное положение элементов. Если свойства не указаны, значение параметра Left Upper Left равно 0.
Ключом к абсолютному позиционированию является понимание точек отсчета. Эти элементы размещаются по отношению к ближайшему родительскому элементу с нестатичной позицией. Если ближайшего элемента не существует, размещение производится по отношению к основному документу.
Размещение.
Элементы с относительным размещением размещаются относительно своей собственной позиции (смещаются на основе позиции по умолчанию). Если изображение смещается, все элементы размещаются, а дублирующее изображение остается на своем месте.
Связанные элементы изымаются из нормального потока документа, но исходные элементы все еще присутствуют в потоке документа, так как все еще существует некоторое влияние на размещение соседних элементов.
Чтобы использовать этот тип размещения, свойство position должно быть установлено на relative.
- Этот тип размещения не относится к элементам таблицы (строки, столбцы, ячейки и т.д.).
- Пространство, занимаемое элементом до смещения, не дополняется элементами выше или ниже него и остается пустым.
Если вы хотите поместить дочерний элемент на его родительский, вам необходимо указать позицию.
Постоянное позиционирование.
Эта схема крепления похожа на абсолютную форму крепления, но с небольшими отличиями.
- Элементы фиксированного размещения всегда игнорируют свой родительский элемент и размещаются относительно окна браузера.
- Элементы не перемещаются при прокрутке страницы.
Фиксированное размещение часто используется для создания вкладок, меню, заголовков и других элементов, которые должны быть видны пользователям сайта в любое время.
z-index.
Веб-страница — это двухмерный элемент со значениями ширины и высоты, а свойство z-index добавляет глубину странице. Чем выше значение z-score, тем «выше» элемент находится на странице; и наоборот, элементы с более низкими z-score находятся позади элементов с более высокими z-score.
Это придает странице вид 3D.
Фоновое размещение
По умолчанию фон устанавливается в левом верхнем углу страницы, но могут быть случаи, когда элементы необходимо разместить в другом месте (например, если фоном является большое изображение, занимающее всю страницу, контент).
Фон страницы позиционируется с помощью свойства background-position. Это свойство может быть процентом, числом или определенным ключевым словом.
- background-position: center-left,.
- background-position: bottom-right,.
- background-position: 20% 90%,
- background-position: 40px 40px.
Процентные значения можно комбинировать с единицами измерения. Если указано одно из них, второе автоматически принимает значение 50%.
Эти схемы размещения определяют влияние элемента на соседние элементы и правила размещения на веб-странице.
Во многих случаях свойство float используется в компоновке для применения размещения только к элементам, которые необходимо выделить из потока.
