Позиционирование элементов с помощью CSS

1. CSS Floats
2. Плавающий влево и вправо
3. Нормальный поток документов
4. Очистка поплавков
5. Очистить элементы контейнера
6. Собственность положения
7. Шей Хоу: позиционирование контента
8. Обзор кода
9. Завершение

Помните тот день, когда MySpace была популярной социальной сетью, и все CSS-позиционирование элементов осуществлялось с помощью таблиц? В гору в обе стороны? В 10 футах снега? Без обуви !

Нет? Хорошо! Проще забыть то, что вы никогда прежде не изучали (подумайте об этом). Двигаясь вдоль ...

В этом уроке мы рассмотрим, как использовать CSS для изменения расположения и расположения элементов. Мы поговорим о поплавках и о том, как правильно их использовать и очищать. Мы обсудим различия между абсолютным, относительным, фиксированным и статическим позиционированием. Затем вы прочитаете пошаговое руководство, которое проведет вас через детали этих концепций. К концу этого урока вы сможете использовать CSS для позиционирования своих элементов. Позиция. Давайте погрузимся в!

CSS Floats

Так что же такое CSS float? Перефразируя MDN документы :

CSS-плавающие элементы используются для извлечения элемента из обычного потока документа и размещения его слева или справа от содержащего его элемента.

Прежде чем мы рассмотрим, что означает «из нормального потока документа», давайте посмотрим на типы с плавающей точкой. Во-первых, свойство, которое вы будете использовать для установки значения элемента с плавающей точкой, - это float. Легко запомнить, да? Наиболее часто используемые значения для свойства float:

1. слева: плавающий элемент влево
2. справа: плавающий элемент вправо
3. none: удалить любое значение с плавающей точкой

Плавающий влево и вправо

Плавающий элемент влево или вправо легко. Все, что вам нужно сделать, это установить свойство float влево или вправо. Вот пример:

.left {float: left; } .right {float: right; }

Приведенный выше код переместит любой элемент с классом .left слева и любой элемент с классом .right справа. Это кажется слишком легким и слишком хорошим, чтобы быть правдой, верно? На самом деле, это слишком хорошо, чтобы быть правдой. Причина в том, что концепция «из нормального потока» мы упоминали ранее. Это подводит нас к очистке и очистке.

Нормальный поток документов

Что означает «изъятый ​​из нормального документооборота»?

Нормальный документооборот это способ отображения и расположения элементов по умолчанию. В случае позиционирования и перемещений этот нормальный поток заставляет дочерние элементы содержаться в родительских элементах. Это то, что мы ожидаем, ведь это имеет визуальный смысл, когда мы смотрим на HTML так:

<div id = "parent"> <div id = "child"> </ div> </ div>

Из приведенной выше разметки мы ожидаем, что дочерний div будет отображаться внутри родительского div. Вышеуказанные элементы будут отображаться как положено в «нормальном потоке документов». Тем не менее, это изменяется при использовании поплавков. Вот почему мы должны использовать clearfix.

Очистка поплавков

Очистка поплавков - это то, как мы обращаемся к возврату к нормальному потоку документов. Это способ указать, что на элемент не должны воздействовать никакие предыдущие плавающие элементы. Это звучит абстрактно без примера, хотя.

.clear {clear: оба; } <div class = "clearfix"> <div class = "квадратный синий левый"> </ div> <div class = "квадратный синий левый"> </ div> <div class = "квадратный красный прозрачный"> </ div > </ div>

Рассмотрите вышеупомянутую разметку, имея в виду, что класс .left будет перемещать элементы влево. Обратите внимание, что у нас есть класс .clear в последнем div, который применяет стиль clear: both ;. Это указывает, что последний div должен возвращаться к нормальному потоку документов и отображаться как элемент блока под плавающими div. В противном случае этот div будет фактически перекрываться плавающими div, потому что они находятся «вне нормального потока документов». Вот визуальный пример двух случаев:

Не очищая последний div, он скрывается под плавающими элементами, <div class = "square red"> </ div>.

Очистка последнего div позволяет ему вернуться к обычному потоку документов и появиться под плавающими элементами, <div class = "square red clear"> </ div>.

Очистить элементы контейнера

Clearfixing - это частый элемент CSS, который позволяет элементам контейнера содержать плавающие элементы. Вы можете подумать, что это происходит по умолчанию, но это не так. Глядя на приведенный выше пример, без применения класса .clearfix эти плавающие элементы div будут фактически удалены из «нормального потока документов» и выведены за пределы своего контейнера div! Также обратите внимание, что мы еще не предоставили CSS для класса .clearfix. Мы объясним это здесь.

.clearfix :: before, .clearfix :: after {display: table; содержание: ""; } .clearfix :: after {clear: both; }

Глядя на приведенный выше код, вы, вероятно, задаетесь вопросом, что, черт возьми, происходит. Понятный. Ты не видел псевдо-классы но концепция проста. Псевдоселекторы :: before и :: after предназначаются для области до и после элемента. По сути, мы говорим, что эти части (которые не видны по умолчанию) должны:

1. Отображать как таблицы
2. Пустой пробел

Далее мы указываем, что элемент :: after должен очищать оба типа с плавающей точкой. Что все это делает? В основном это окружает содержащиеся плавающие элементы с невидимыми стенами, которые держат их в своем контейнере.

Многие CSS-фреймворки по умолчанию предоставляют класс .clearfix и даже применяют его к часто используемым классам, таким как .container. Однако, поскольку мы работаем с необработанным CSS и создаем его с нуля, вам нужно создать его самостоятельно.

Собственность положения

Когда вам нужны точные пиксельные местоположения для ваших элементов, вы хотите использовать свойство position. Свойство position позволяет вам указывать несколько различных типов позиций, которые по-разному влияют на то, как позиционируется элемент. После того, как они установлены, вы можете установить точное местоположение элемента с помощью свойств left, right, top и bottom. Давайте рассмотрим различные типы позиций.

1. static : значение по умолчанию для свойства position. Позиционирует элемент в нормальном потоке документов.
2. fixed : позиционирует элемент относительно области просмотра (самый внешний элемент). Элемент удален из обычного потока документов.
3. absolute : позиционирует элемент относительно следующего наивысшего относительно или абсолютно позиционированного элемента в иерархии элементов. Если ничего не найдено, позиционирует элемент относительно области просмотра. Элемент удален из обычного потока документов.
4. относительный : позиционирует элемент относительно его текущей позиции. Элемент остается в нормальном потоке документов.

Сначала эти определения могут быть немного непрозрачными. Однако с примером и небольшим количеством объяснений вы увидите, что они довольно точны. Вот некоторая разметка и CSS, которые создают стек div:

.square {width: 64px; высота: 64 пикс; } # относительно-позиционируемый-родитель {позиция: относительная; верхняя часть: 32px; слева: 32 пикселя; ширина: 256 пикселей; высота: 256 пикселей; } # абсолютно позиционированный ребенок {позиция: абсолютная; } # относительно-позиционированный-ребенок {позиция: относительная; } # fixed-position-child {position: fixed; верх: 8 пикселей; слева: 8 пикселей; } # абсолютно-позиционированный-ребенок, # относительно-позиционированный-ребенок {top: 32px; слева: 32 пикселя; } <div id = "относительно позиционированный родитель" class = "orange"> <div class = "square white"> Статический </ div> <div id = "относительно позиционированный ребенок" class = "фиолетовый квадрат"> Rel </ div> <div class = "square white"> Static </ div> <div id = "absolute-positioned-child" class = "cyan square"> Abs </ div> <div class = "square white" > Статический </ div> <div id = "fixed-position-child" class = "grey square"> Исправлено </ div> </ div>

Вот результат:

Давайте поговорим о влиянии каждого типа позиционирования, отображаемого здесь.

1. Исправлено : фиксированная позиция div удаляется из контейнера (обычный поток документов) и помещается относительно области просмотра. Вы можете видеть, что это вне его содержащего div и расположено в 8px от верхнего левого угла области просмотра.
2. Абсолют : абсолютно позиционированный div удаляется из обычного потока документов, но остается дочерним по отношению к относительно позиционированному родителю. Тем не менее, вы можете видеть, что он перекрывает div над ним, и окружающие div действуют так, как будто его там нет. Это эффект абсолютного позиционирования при удалении элемента из обычного потока документов.
3. Относительно : относительно позиционированный div остается в нормальном потоке документов. Вы можете видеть это из-за недостатка места в стеке белых элементов. Вы также можете видеть, что он перемещается на 32 пикселя из верхнего левого угла своей исходной позиции в обычном потоке документов .

Стоит отметить эту позицию: относительная; обычно используется просто для добавления значения позиции к родительскому элементу дочернего элемента с помощью position: absolute ;. Это позволяет позиционировать дочерний элемент абсолютно относительно позиции родительского элемента. В «реальном мире» вы редко будете использовать относительное позиционирование для чего-либо другого, кроме этой цели.

Обернуть голову вокруг позиционирования CSS немного сложно. Поиграйте с этими понятиями! Обычно это лучший способ убрать тайну. Другой способ - углубить ваше понимание путем более подробного прочтения!

Шей Хоу: позиционирование контента

Мы рассмотрели определения и несколько примеров позиционирования с помощью float и свойства position. Теперь ваша задача - прочитать Прохождение Shay Howe по позиционированию контента , Он расскажет, как можно продвинуть эти концепции дальше, чтобы начать создавать макеты и сетки, а также предоставит несколько редактируемых примеров кода свойств CSS, которые мы представили здесь.

Обзор кода

Важные фрагменты кода из этого урока

/ * Плавающие * / .left {float: left; } .right {float: right; } .clear {clear: оба; } / * Clearfix * / .clearfix :: before, .clearfix :: after {display: table; содержание: ""; } .clearfix :: after {clear: both; } / * Positioning * / # абсолютно позиционированный ребенок {position: absolute; } # относительно-позиционированный-ребенок {позиция: относительная; } # fixed-position-child {position: fixed; / * ... * /}

Завершение

CSS позиционирование предоставляет вам множество вариантов. По мере развития и использования этих инструментов снова и снова вы поймете, насколько они полезны для создания богатых макетов и пользовательских интерфейсов. Сначала они могут показаться сложными, и вам может быть интересно: «Но почему мы не можем просто использовать таблицы ?!». Наберитесь терпения и продолжайте использовать CSS-позиционирование, и вскоре вы увидите всю мощь его точности!

Похожие

Комментарии