), списки (

) и другие элементы.

А теперь о

ах.

Как уже говорилось выше, задать местоположение можно любому HTML элементу. Для этого нет нужды всегда использовать тег

. Также использование данного тега не обязывает вас задавать ему какое-либо положение на веб-странице.
Смысл применения блока, заданного тегом
сводится к укрупнению. Ведь внутрь его можно поместить другие элементы (параграфы, картинки, и тд.). Таким образом получается крупный блок, с разнообразным содержимым, который значительно легче позиционировать на веб-странице, нежели каждый из элементов в отдельности.
Позиционирование элементов.
Существует четыре основных типа позиционирования:
1. Статическое (Static)
2. Абсолютное (Absolute)
3. Фиксированное (Fixed)
4. Относительное (Relative )
Статическое (Static)
Используется как расположение «по умолчанию». В этом случае браузер просматривает html код, разделяет его на элементы и составляет из них страницу. Получается последовательность из ряда элементов. Выводятся они в том порядке, в котором указаны в html коде.
Применение параметров left, top, right и bottom не приводит к каким-либо результатам.
Необходимо помнить о статическом позиционировании, когда используется относительное расположение.
Абсолютное (Absolute)
С помощью абсолютного позиционирование задаются координаты левого верхнего угла блока. При этом отсчет координат происходит относительно расположения родительского элемента. Если родительским элементом является окно браузера, тогда выравнивание блока происходит относительно него. Если существует другой элемент, внутри которого расположен блок, тогда выравнивание происходит уже относительно этого элемента.
Фиксированное (Fixed)
Уже из названия становится ясно, что в данном случае элемент фиксируется. Он располагается в определенном месте веб-страницы и никуда не сдвигается. Подобное выравнивание часто применяется по отношению к всплывающим окнам, когда они фиксируются по центру и не смещаются при прокрутке страницы.
Относительное (Relative)
С этим видом позиционирования могут быть сложности. Его название не совсем удачное. Многие путают относительное и абсолютное позиционирование элементов. Может показаться, что выравнивание происходит относительно родительского элемента. А в случае с абсолютным позиционированием - относительно окна браузера. Но это не так.
Нужно уяснить, что расположение элемента в этом случае происходит относительно его же места в статическом положении. Это то, о чем упоминалось выше.
Проще говоря, вы указываете браузеру, что необходимо передвинуть элемент на столько-то пикселей, относительно того места, где он расположен по умолчанию.
Существует еще один сложный момент. Что произойдет, если родительский элемент имеет относительное позиционирование, а вложенный в него элемент абсолютное? В этом случае отсчет координат дочернего элемента будет производиться относительно родительского элемента, с учетом его смещения, если оно имеет место.
Подведем итог.
Итак, имеется свойство position . Это свойство может принимать 4 значения Static, Absolute, Fixed и Relative . По умолчанию идет Static .
Когда вы указываете координаты для элемента, необходимо также сообщить браузеру, каким образом он должен эти координаты отсчитывать. Надо дать ему отправную точку.
Не забывайте, что при отсутствии свойства position координаты учитываться не будут, блок останется на прежнем месте, в своем статическом положении.


А теперь посмотрим, каким образом задаются координаты.
Для этих целей применяются четыре вида свойств:
1. Top
2. Left
3. Right
4. Bottom
Top - положительное значение (например, 20px) смещает блок на 20 пикселей вниз. Отрицательное значение (-20px) смещает элемент на 20 пикселей верх. Все это происходит относительно левого верхнего угла.
Left - смещение влево или вправо, в зависимости от знака. Относительно левого верхнего угла.
Right - смещение вправо и влево, смотря какой знак. Относительно правого верхнего угла.
Bottom - смещение вверх или вниз, зависит от знака. Происходит относительно левого нижнего угла.
Вот код HTML:







А это CSS:
#1 {
position:relative;
top:100px;
left:100px;
width:500px;
height:500px;
background-color:#CCCCCC;
}
#11 {
background-color:#003399;
position:absolute;
bottom: -30px;
right: -50px;
width:100px;
height:100px;
}
#2 {
background-color:#990066;
width:200px;
height:300px
}
Потренируйтесь.
Пока писал и сам разобрался .
Для вёрстки страниц часто используются два основных инструмента — позиционирование (positioning) и свободное перемещение (floating) . CSS-позиционирование позволяет указать, где появится блок элемента, а свободное перемещение перемещает элементы к левому или правому краю блока-контейнера, позволяя остальному содержимому «обтекать» его.
Позиционирование и свободное перемещение элементов
1. Типы позиционирования
Свойство position позволяет точно задать новое местоположение блока относительно того места, где он находился бы в нормальном потоке документа. По умолчанию все элементы располагаются последовательно один за другим в том порядке, в котором они определены в структуре HTML-документа. Свойство не наследуется.
position
Значение:
static	Значение по умолчанию, означает отсутствие позиционирования. Элементы отображаются последовательно один за другим в том порядке, в котором они определены в HTML-документе. Используется для очистки любого другого значения позиционирования.
relative	Относительно позиционированный элемент сдвигается со своего обычного места в разных направлениях относительно границ родительского контейнера, а пространство, которое он занимал, не исчезает. При этом такой элемент может перекрывать другое содержимое на странице. Если для относительно позиционированного элемента одновременно задать свойства top и bottom или left и right , то в первом случае сработает только top , во втором — left . Относительное позиционирование позволяет задавать z-index для элемента, а также абсолютно позиционировать дочерние элементы внутри блока.
absolute	Абсолютно позиционированный элемент полностью удаляется из потока документа и позиционируется относительно границ его блока-контейнера (другого элемента или окна браузера). Блок-контейнер для абсолютно позиционированного элемента — ближайший элемент-предок, значение свойства position которого не равно static . Местоположение краёв элемента определяется с помощью свойств смещения. Пространство, которое занимал такой элемент, схлопывается, как будто элемента не существовало на странице. Абсолютно позиционированный элемент может перекрывать другие элементы или быть перекрытым ими (за счёт свойства z-index). Любой абсолютно позиционированный элемент генерирует блок, то есть принимает значение display: block; .
fixed	Фиксирует элемент в указанном месте страницы. Блоком-контейнером фиксированного элемента является окно просмотра, то есть элемент всегда фиксируется относительно окна браузера и не меняет своего положения во время прокрутки страницы. Сам элемент при этом полностью удаляется из основного потока документа и создаётся в новом потоке документа.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Рис. 1. Разница между статичным, относительным и абсолютным позиционированием
2. Свойства смещения
Свойства описывают смещение относительно ближайшей стороны блока-контейнера. Задаются для элементов, для которых значение свойства position не равно static . Могут принимать как положительные, так и отрицательные значения. Не наследуются.
Для свойства top положительные значения перемещают верхний край позиционируемого элемента ниже, а отрицательные — выше верхнего края его блока-контейнера. Для свойства left положительные значения сдвигают край позиционируемого элемента вправо, а отрицательные значения — влево. То есть, положительные значения смещают элемент внутрь блока-контейнера, а отрицательные — за его пределы.
3. Позиционирование внутри элемента
Для блока-контейнера абсолютно позиционированного элемента задаётся свойство position: relative без смещений. Это позволяет позиционировать элементы внутри элемента-контейнера.
.wrap { padding: 10px; height: 150px; position: relative; background: #e7e6d4; text-align: right; border: 3px dashed #645a4e; } .white { position: absolute; width: 200px; top: 10px; left: 10px; padding: 10px; background: #ffffff; border: 3px dashed #312a22; }
Рис. 2. Абсолютное относительное позиционирование
4. Проблемы позиционирования
1. Если ширине или высоте абсолютно позиционированного элемента присвоено значение auto , то её значение будет определяться шириной или высотой содержимого элемента. Если ширина или высота объявлена явно, то именно это значение и будет присвоено.
2. Если внутри блока с position: absolute расположены элементы, для которых задано обтекание float , то высота этого элемента будет равна высоте самого высокого из этих элементов.
3. Для элемента с position: absolute или position: fixed нельзя одновременно устанавливать свойство float , а для элемента с position: relative — можно.
4. Если предок позиционированного элемента является блочным элементом, то блок-контейнер формируется областью содержимого, ограниченной рамкой (border). Если предок — строковый элемент, блок-контейнер формируется внешней границей его содержимого. Если предка нет, блоком-контейнером является элемент body .
5. Свободное перемещение элементов
В обычном порядке блочные элементы отображаются, начиная с верхнего края окна браузера по направлению к нижнему краю. Свойство float позволяет перемещать любой элемент, выравнивая его по левому или правому краю веб-страницы или содержащего его элемента-контейнера. При этом остальные блочные элементы будут его игнорировать, а строчные элементы будут смещаться вправо или влево, освобождая для него пространство и обтекая его.
Рис. 3. Свободное перемещение элементов
Плавающий блок принимает размеры своего содержимого с учетом внутренних отступов и рамок. Верхние и нижние отступы margin плавающих элементов не схлопываются. Свойство float применяется как к блочным элементам, так и к строчным элементам.
Левый или правый внешний край перемещаемого элемента, в отличие от позиционированных элементов, не может располагаться левее (или правее) внутреннего края его блока-контейнера, т.е. выходить за его границы. При этом, если для блока-контейнера заданы внутренние отступы, то плавающий блок будет отстоят от края блока-контейнера на заданное расстояние.
Свойство автоматически изменяет вычисляемое (отображаемое в браузере) значение свойства display на display: block для следующих значений: inline , inline-block , table-row , table-row-group , table-column , table-column-group , table-cell , table-caption , table-header-group , table-footer-group . Значение inline-table меняет на table .
Свойство не оказывает никакого влияния на элементы с display: flex и display: inline-flex .
При использовании свойства float для блочных элементов обязательно задавать ширину. Тем самым браузер создаст место для другого содержимого. Но если совокупная ширина всех столбцов окажется больше доступного места, то последний элемент спустится вниз.
При этом вертикальные отступы margin обтекаемых элементов не схлопываются с отступами соседних элементов, в отличие от обычных блочных элементов.
6. Отмена обтекания элементов
6.1. Свойство clear
Свойство clear определяет, как будет располагаться элемент, идущий следом за плавающим элементом. Свойство отменяет обтекание с одной или обоих сторон элемента, установленное свойством float . Для предотвращения отображение фона или границ под плавающими элементами используется правило {overflow: hidden;} .
6.2. Очистка потока стилями при помощи класса clearfix и псевдокласса:after
Предположим, имеется блок-контейнер, для которого не заданы ширина и высота. Внутри него помещен плавающий блок с заданными размерами.
.container { padding: 20px; background: #e7e6d4; border: 3px dashed #645a4e; } .floatbox { float: left; width: 300px; height: 150px; margin-right: 20px; padding: 0 20px; background: #ffffff; border: 3px dashed #666666; } Рис. 4. «Эффект схлопывания» блока-контейнера
Решение проблемы:
Создаем класс.clearfix и в сочетании с псевдоклассом:after применяем его к блоку-контейнеру.
.container { padding: 20px; background: #e7e6d4; border: 3px dashed #645a4e; } .floatbox { float: left; width: 300px; height: 150px; margin-right: 20px; padding: 0 20px; background: #ffffff; border: 3px dashed #666666; } .clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }
Второй вариант очистки потока:
Clearfix:after { content: ""; display: table; clear: both; }
Рис. 5. Применение «очищающего» метода для блока-контейнера, содержащего плавающий элемент
6.3. Легкий способ очистки потока
Существует ещё один прием очистки потока для элемента, содержащего плавающие элементы, например, для маркированного горизонтального списка:
Ul { margin: 0; list-style: none; padding: 20px; background: #e7e6d4; overflow: auto; } li { float: left; width: calc(100% / 3 - 20px); height: 50px; margin-right: 20px; background: #ffffff; border: 3px dashed #666666; } li:last-child {margin-right: 0;} Рис. 6. Очистка потока горизонтального списка
Одной из лучших сторон CSS является то, что стили дают нам возможность позиционировать содержимое и элементы на странице практически любым мыслимым образом. Это вносит структурность в наш дизайн и помогает сделать контент более наглядным.
Есть несколько разных типов позиционирования в CSS, каждый из этих типов имеет свою область действия. В этой главе мы собираемся взглянуть на несколько различных случаев применения - создание многократно используемых макетов и уникальное позиционирование одноразовых элементов, а также описание нескольких методов как это сделать.
Позиционирование через float
Один из способов позиционирования элементов на странице - через свойство float . Это свойство довольно универсально и может применяться разными путями.
По существу, свойство float берёт элемент, убирает его из обычного потока страницы и позиционирует слева или справа от родительского элемента. Все остальные элементы на странице будут обтекать такой элемент. Например, абзацы будут обтекать изображение, если для элемента установлено свойство float .
Когда свойство float применяется к нескольким элементам одновременно, это даёт возможность создать макет с обтекаемыми элементами расположенными рядом или напротив друг друга, как показано в многоколоночном макете.
Свойство float принимает несколько значений, два самых популярных - это left и right , они позволяют элементу располагаться слева или справа от своего родителя.
Img { float: left; }
float на практике
Давайте создадим общий макет страницы с шапкой вверху, двумя колонками в центре и подвалом внизу. В идеале эту страницу следует разметить с помощью элементов
,
,