Расположение блоков html: CSS позиционирование, обтекание элементов и контекст наложения

Leave a Comment / Html / By alexxlab / 05.04.1970

Содержание

CSS позиционирование, обтекание элементов и контекст наложения

CSS рассматривает макет html-документа как дерево элементов. Уникальный элемент, у которого нет родительского элемента, называется корневым элементом. Модуль CSS-позиционирование описывает, как любой из элементов может быть размещен независимо от порядка документа (т.е. извлечен из «потока»).

В CSS2 каждый элемент в дереве документа генерирует ноль или более блоков в соответствии с блочной моделью. Модуль CSS3 дополняет и расширяет схему позиционирования. Расположение этих блоков регулируется:

размерами и типом элемента,
схемой позиционирования (нормальный поток, обтекание и абсолютное позиционирование),
отношениями между элементами в дереве документа,
внешней информацией (например, размер области просмотра, внутренними размерами изображений и т.д.).

Схемы позиционирования

В CSS блок элемента может быть расположен в соответствии с тремя схемами позиционирования:

Нормальный поток

Нормальный поток включает блочный контекст форматирования (элементы с

display block, list-item или table), строчный (встроенный) контекст форматирования (элементы с display inline, inline-block или inline-table), и относительное и «липкое» позиционирование элементов уровня блока и строки.

Обтекание

В обтекающей модели блок удаляется из нормального потока и позиционируется влево или вправо. Содержимое обтекает правую сторону элемента с float: left и левую сторону элемента с float: right.

Абсолютное позиционирование

В модели абсолютного позиционирования блок полностью удаляется из нормального потока и ему присваивается позиция относительно содержащего блока. Абсолютное позиционирование реализуется с помощью значений position: absolute; и position: fixed;.

Элементом «вне потока» может быть плавающий, абсолютно позиционированный или корневой элемент.

1. Содержащий блок

Положение и размер блока(ов) элемента иногда вычисляются относительно некоторого прямоугольника, называемого содержащим блоком элемента (containing block). В общих словах, содержащий блок — это блок, который содержит другой элемент. В случае нормального потока корневой элемент html является содержащим блоком для элемента body, который, в свою очередь, является содержащим блоком для всех его дочерних элементов и так далее. В случае позиционирования содержащий блок полностью зависит от типа позиционирования. Содержащий блок элемента определяется следующим образом:

Содержащий блок, в котором находится корневой элемент, представляет собой прямоугольник — так называемый начальный содержащий блок.
Для некорневого элемента с position: static; или position: relative; содержащий блок формируется краем области содержимого ближайшего родительского блока уровня блока, ячейки таблицы или уровня строки.
Содержащим блоком элемента с position: fixed; является окно просмотра.
Для некорневого элемента с position: absolute; содержащим блоком устанавливается ближайший родительский элемент со значением position: absolute/relative/fixed следующим образом:
— если предок — элемент уровня блока, содержащим блоком будет область содержимого плюс поля элемента padding;
— если предок — элемент уровня строки, содержащим блоком будет область содержимого;
— если предков нет, то содержащий блок элемента определяется как начальный содержащий блок.
Для «липкого» блока содержащим блоком является ближайший предок с прокруткой или окно просмотра, в противном случае.

2. Выбор схемы позиционирования: свойство position

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

Свойство не наследуется.

position
Значение:
`static`	Блок располагается в соответствии с нормальным потоком. Свойства `top`, `right`, `bottom` и `left` не применяются. Значение по умолчанию.
`relative`	Положение блока рассчитывается в соответствии с нормальным потоком. Затем блок смещается относительно его нормального положения и во всех случаях, включая элементы таблицы, не влияет на положение любых следующих блоков. Тем не менее, такое смещение может привести к перекрытию блоков, а также к появлению полосы прокрутки в случае переполнения. Относительно позиционированный блок сохраняет свои размеры, включая разрывы строк и пространство, первоначально зарезервированное для него. Относительно позиционированный блок создает новый содержащий блок для абсолютно позиционированных потомков. Влияние `position: relative;` на элементы таблицы определяется следующим образом: Элементы с `table-row-group`, `table-header-group` , `table-footer-group` иd `table-row` смещаются относительно их обычной позиции в таблице. Если ячейки таблицы занимают несколько строк, смещаются только ячейки начальной строки. `table-column-group`, `table-column` не смещает соответствующий столбец и не оказывает визуального влияния. table-caption and table-cell смещаются относительно своего нормального положения в таблице. Если ячейка таблицы охватывает несколько столбцов или строк, то она смещается целиком.
`absolute`	Положение блока (и, возможно, размер) задается с помощью свойств `top`, `right`, `bottom` и `left`. Эти свойства определяют явное смещение относительно его содержащего блока. Абсолютно позиционированные блоки полностью удаляется из нормального потока, не влияя на расположение сестринских элементов. Отступы `margin` абсолютно позиционированных блоков не схлопываются. Абсолютно позиционированный блок создает новый содержащий блок для дочерних элементов нормального потока и потомков с `position: absolute;`. Содержимое абсолютно позиционированного элемента не может обтекать другие блоки. Абсолютно позиционированный блок могут скрывать содержимое другого блока (или сами могут быть скрыты), в зависимости от значения `z-index` перекрывающихся блоков.
`sticky`	Положение блока рассчитывается в соответствии с нормальным потоком. Затем блок смещается относительно своего ближайшего предка с прокруткой или окна просмотра, если ни у одного из предков нет прокрутки. «Липкий» блок может перекрывать другие блоки, а также создавать полосы прокрутки в случае переполнения. «Липкий» блок сохраняет свои размеры, включая разрывы строк и пространство, первоначально зарезервированное для него. «Липкий» блок создает новый содержащий блок для абсолютно и относительно позиционированных потомков.
`fixed`	Фиксированное позиционирование аналогично абсолютному позиционированию, с отличием в том, что для содержащим блоком устанавливается окно просмотра. Такой блок полностью удаляется из потока документа и не имеет позиции относительно какой-либо части документа. Фиксированные блоки не перемещаются при прокрутке документа. В этом отношении они похожи на фиксированные фоновые изображения. При печати фиксированные блоки повторяются на каждой странице, содержащим блоком для них устанавливается область страницы. Блоки с фиксированным положением, которые больше области страницы, обрезаются.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

Синтаксис

position: static;
position: relative;
position: absolute;
position: sticky;
position: fixed;
position: initial;
position: inherit;

Рис. 1. Разница между статичным, относительным и абсолютным позиционированием

3. Смещение блока: свойства top, right, bottom, left

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

top
Значение:
`auto`	Влияние значения зависит от типа элемента. Значение по умолчанию.
длина	Смещение на фиксированном расстоянии от указанного края. Отрицательные значения допускаются.
`%`	Процентные значения вычисляются относительно высоты содержащего блока. Для «липкого» блока — относительно высоты корневого элемента. Отрицательные значения допускаются.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

Синтаксис

top: 10px;
top: 2em;
top: 50%;
top: auto;
top: inherit;
top: initial;

Свойство top задает расстояние, на которое верхний край абсолютно позиционированного блока (с учетом его margin) смещается ниже верхнего края содержащего блока. Для относительно позиционированных блоков определяет смещение относительно верхнего края самого блока (то есть блоку задается позиция в нормальном потоке, а затем смещение от этой позиции в соответствии с этим свойством).

right
Значение:
`auto`	Влияние значения зависит от типа элемента. Значение по умолчанию.
длина	Смещение на фиксированном расстоянии от указанного края. Отрицательные значения допускаются.
`%`	Процентные значения вычисляются относительно ширины содержащего блока. Для «липкого» блока — относительно ширины корневого элемента. Отрицательные значения допускаются.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

Синтаксис

right: -10px;
right: .5em;
right: -10%;
right: auto;
right: inherit;
right: initial;

Свойство right указывает расстояние, на которое правый край абсолютно позиционированного блока (с учетом его margin) смещен влево от правого края содержащего блока. Для относительно позиционированных блоков определяет смещение относительно правого края самого блока.

bottom
Значение:
`auto`	Влияние значения зависит от типа элемента. Значение по умолчанию.
длина	Смещение на фиксированном расстоянии от указанного края. Отрицательные значения допускаются.
`%`	Процентные значения вычисляются относительно высоты содержащего блока. Для «липкого» блока — относительно высоты корневого элемента. Отрицательные значения допускаются.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

Синтаксис

bottom: 50px;
bottom: -3em;
bottom: -50%;
bottom: auto;
bottom: inherit;
bottom: initial;

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

left
Значение:
`auto`	Влияние значения зависит от типа элемента. Значение по умолчанию.
длина	Смещение на фиксированном расстоянии от указанного края. Отрицательные значения допускаются.
`%`	Процентные значения вычисляются относительно ширины содержащего блока. Для «липкого» блока — относительно ширины корневого элемента. Отрицательные значения допускаются.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

Синтаксис

left: 50px;
left: 10em;
left: 20%;
left: auto;
left: inherit;
left: initial;

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

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

4. Обтекание: свойство float

Обтекание позволяет блокам смещаться влево или вправо на текущей строке. «Плавающий блок» смещается влево или вправо до тех пор, пока его внешний край не коснется края содержащего блока или внешнего края другого плавающего блока. Если имеется линейный блок, внешняя верхняя часть плавающего блока выравнивается с верхней частью текущего линейного блока.

При использовании свойства float для элементов рекомендуется задавать ширину. Тем самым браузер создаст место для другого содержимого. Если для плавающего элемента недостаточно места по горизонтали, он будет смещаться вниз до тех пор, пока не уместится. При этом остальные элементы уровня блока будут его игнорировать, а элементы уровня строки будут смещаться вправо или влево, освобождая для него пространство и обтекая его.

Правила, регулирующие поведение плавающих боков, описываются свойством float.

Свойство не наследуется.

float
Значение:
`none`	Отсутствие обтекания. Значение по умолчанию.
`left`	Элемент перемещается влево, содержимое обтекает плавающий блок по правому краю.
`right`	Элемент перемещается вправо, содержимое обтекает плавающий блок по левому краю.
`inherit`	Наследует значение свойства от родительского элемента.

Синтаксис

float: left;
float: right;
float: none;
float: inherit;

Плавающий блок принимает размеры своего содержимого с учетом внутренних отступов и рамок. Верхние и нижние отступы margin плавающих элементов не схлопываются.

Плавающие элементы могут использовать отрицательные отступы margin, чтобы перемещаться за пределы области содержимого их родительского элемента.

Свойство автоматически изменяет вычисляемое (отображаемое в браузере) значение свойства 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. Не применяется к абсолютно позиционированным элементам.

Рис. 2. Обтекание элементов

5. Управление потоком рядом с плавающими элементами: свойство clear

Свойство clear указывает, какие стороны блока/блоков элемента не должны прилегать к плавающим блокам, находящемся выше в исходном документе. В CSS2 и CSS 2.1 свойство применяется только к неплавающим элементам уровня блока.

Свойство не наследуется.

clear
Значение:
`none`	Означает отсутствие ограничений на положение элемента относительно плавающих блоков. Значение по умолчанию.
`left`	Смещает элемент вниз относительно нижнего края любого плавающего слева элемента, находящемся выше в исходном документе.
`right`	Смещает элемент вниз относительно нижнего края любого плавающего справа элемента, находящемся выше в исходном документе.
`both`	Смещает элемент вниз относительно нижнего края любого плавающего слева и справа элемента, находящемся выше в исходном документе.
`inherit`	Наследует значение свойства от родительского элемента.

Синтаксис

clear: none;
clear: left;
clear: right;
clear: both;
clear: inherit;

Для предотвращения отображение фона или границ под плавающими элементами используется правило {overflow: hidden;}.

6. Определение контекста наложения: свойство z-index

В CSS каждый блок имеет позицию в трех измерениях. В дополнение к горизонтальному и вертикальному положению, блоки выкладываются вдоль оси Z друг над другом. Положение вдоль оси Z особенно важно, когда блоки визуально накладываются друг на друга.

Рис. 3. Положение элементов вдоль оси Z

Порядок, в котором дерево документа отрисовывается на экране, описывается с помощью контекста наложения. Каждый блок принадлежит одному контексту наложения. Каждый блок в данном контексте наложения имеет целочисленный уровень, который является его положением на оси Z относительно других блоков в том же контексте наложения.

Блоки с более высокими уровнями всегда отображаются перед блоками с более низкими уровнями, а блоки с одинаковым уровнем располагаются снизу вверх в соответствии с порядком следования элементов в исходном документе. Блок элемента имеет ту же позицию, что и блок его родителя, если только ему не присвоен другой уровень свойством z-index.

Свойство z-index позволяет изменить порядок наложения позиционированных элементов в случае, когда они накладываются друг на друга.

Свойство не наследуется.

z-index
Значение:
`auto`	Вычисляется в `0`. Если для блока задано `position: fixed;` или это корневой элемент, значение `auto` также устанавливает новый контекст наложения. Значение по умолчанию.
целое число	Определяет положение блока в текущем контексте наложения. Также устанавливает новый локальный контекст наложения. Можно использовать любое целое число, включая отрицательные числа. Отрицательные значения помещают элемент вглубь экрана.
`inherit`	Наследует значение свойства от родительского элемента.
`initial`	Устанавливает значение свойства в значение по умолчанию.

Синтаксис

z-index: auto;
z-index: 0;
z-index: 5;
z-index: 999;
z-index: -1;
z-index: inherit;
z-index: initial;

6.1. Контекст наложения

Если для элементов свойства z-index и position не заданы явно, контекст наложения равен порядку их расположения в исходном коде и браузер отображает элементы на странице в следующем порядке:

Корневой элемент <html>, который содержит все элементы веб-странице.
Блочные элементы, неплавающие и непозиционированные.
Плавающие float непозиционированные элементы в порядке их расположения в исходном коде.
Строковые непозиционированные элементы (текст, изображения).
Позиционированные position элементы в порядке их следования в исходном коде. Последний из них будет расположен на переднем плане.

Свойство z-index создает новый контекст наложения. Оно позволяет изменить порядок наложения позиционированных элементов. Элементы будут отображаться на странице в следующем порядке (если для них не заданы свойства, влияющие на контекст наложения — opacity, filter, transform):

Корневой элемент <html>, который содержит все элементы веб-странице.
Позиционированные элементы с отрицательным значением z-index.
Блочные элементы, неплавающие и непозиционированные.
Плавающие float непозиционированные элементы в порядке их расположения в исходном коде.
Строковые непозиционированные элементы (текст, изображения).
Позиционированные элементы со значениями z-index: 0; и z-index: auto;.

position | htmlbook.ru

Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	8.0+	1.0+	4.0+	1.0+	1.0+	1.0+	1.0+

Краткая информация

Версии CSS

Описание

Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице.

Синтаксис

position: absolute | fixed | relative | static | inherit

Значения

absolute: Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задается свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчет координат ведется от края окна браузера. Если у родителя значение position задано как fixed, relative или absolute, то отсчет координат ведется от края родительского элемента.
fixed: По своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы. Браузер Firefox вообще не отображает полосы прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но они никак не влияют на позицию элемента.
relative: Положение элемента устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения.
static: Элементы отображаются как обычно. Использование свойств left, top, right и bottom не приводит к каким-либо результатам.
inherit: Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>position</title>
  <style>
   .layer1 {
    position: relative; /* Относительное позиционирование */
    background: #f0f0f0; /* Цвет фона */
    height: 200px; /* Высота блока */
   }
   .layer2 {
    position: absolute; /* Абсолютное позиционирование */
    bottom: 15px; /* Положение от нижнего края */
    right: 15px; /* Положение от правого края */
    line-height: 1px;
   }
  </style>
 </head>
 <body>
  <div>
   <div>
     <img src="images/girl.jpg" alt="Девочка" />
   </div>
  </div>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства position

Объектная модель

[window.]document.getElementById(«elementID»).style.position

Браузеры

Браузер Internet Explorer 6 значение fixed не поддерживает. Internet Explorer до версии 8.0 не поддерживает значение inherit.

Позиционирование — Изучение веб-разработки | MDN

Позиционирование позволяет вам изымать элементы из нормального потока макета документа и заставить их вести себя по-другому; например, располагаться друг на друге или всегда оставаться на одном и том же месте внутри окна просмотра браузера. Эта статья объясняет разные значения position и как их использовать.

Необходимые знания:	Основы HTML (изучите Введение в HTML), идея о том как работает CSS (изучите Введение в CSS.)
Задача:	Изучить как работает CSS позиционирование.

Нам бы хотелось чтобы вы следовали за нами с упражнениями на вашем локальном ПК, если возможно возьмите копию 0_basic-flow.html из нашего GitHub репозитория (исходный код здесь) и используйте его как отправную точку.

Вся идея позиционирования заключается в том, чтобы позволить нам переопределять поведение базового потока документа, описанного выше, для того чтобы производить интересные эффекты. Что если вам захочется слегка изменить позицию каких-либо блоков внутри макета относительно их позиции в потоке макета по умолчанию? Ваш инструмент — позиционирование. Или если вы хотите создать элемент пользовательского интерфейса, который плавает над другими частями страницы и/или всегда располагается на одном и том же месте в окне браузера не зависимо от того сколько прокручивалась страница? Позиционирование делает возможным работу таких макетов.

Существует несколько разных типов позиционирования, которые вы можете применить к элементам HTML. Для активации специфического типа позиционирования у элемента, мы используем свойство position.

Статическое позиционирование

Статическое позиционирование — это умолчание, которое получает каждый элемент, что всего лишь значит «поставить элемент в его нормальное положение в потоке макета документа — ничего особенного для рассмотрения».

Чтобы продемонстрировать это и настроить ваш образец для будущих разделов, сначала добавьте class positioned ко второму <p> в HTML:

<p> ... </p>

А теперь добавьте следующее правило в конец вашего CSS:

.positioned {
  position: static;
  background: yellow;
}

И если вы сейчас сохраните и обновите, то вы не увидите никаких изменений, не считая обновлённого цвета фона 2-го параграфа. Это нормально, как мы и говорили ранее, статическое позиционирование является поведением по умолчанию!

Относительное позиционирование

Относительное позиционирование первый тип позиции, который мы рассмотрим. Оно очень похоже на статическое позиционирование, за исключением того что вы можете модифицировать окончательное положение позиционируемого объекта занявшего своё место в макете нормального потока, в том числе заставлять его перекрывать другие элементы на странице. Двигайтесь далее и обновите объявление position в вашем коде:

Если вы сохраните и обновите на данном этапе, в результате вы совсем не увидите изменений. Так как же вам модифицировать положение? Вам необходимо использовать свойства top, bottom, left (en-US), и right которые мы объясним в следующем разделе.

Введение в top, bottom, left, и right

top, bottom, left (en-US), и right используются вместе с position чтобы указать куда именно перемещать позиционируемый элемент. Для того чтобы попробовать, добавьте следующее объявление к правилу .positioned в вашем CSS:

Примечание: значения этих свойств могут принимать любые единицы которые вы ожидаете по логике: пиксели, мм, rems, %, и т.д.

Если вы сейчас сохраните и обновите, вы получите примерно такой результат:

Круто, правда? Хорошо, вероятно это не то, чего вы ожидали — почему он переместился вниз и вправо, когда мы указали вверх и влево? Как бы нелогично это ни звучало это всего лишь способ того как работает позиционирование — вам надо думать о невидимой силе толкающей указанную сторону позиционируемого блока, перемещая его в противоположную сторону. Так, например, если вы указали top: 30px;, сила толкает блок, заставляя его перемещаться вниз на 30px.

Абсолютное позиционирование

Абсолютное позиционирование даёт совершенно другие результаты. Давайте попробуем изменить объявление позиции в вашем коде как показано ниже:

Если вы сохраните и обновите, то вы должны увидеть нечто подобное:

В первую очередь обратите внимание на то, что интервал там, где должен быть позиционируемый элемент в потоке документа теперь отсутствует — первый и третий элементы сблизились так будто, он больше не существует! Ну, в каком-то смысле это правда. Абсолютно позиционированный элемент больше не существует в нормальном потоке макета документа. Вместо этого он располагается на своём собственном слое отдельно от всего остального. Это очень полезно: это значит, что мы можем создавать изолированные функции пользовательского интерфейса, которые не влияют на макет других элементов страницы. Например, всплывающие информационные блоки и меню управления; опрокидывающиеся панели; функции пользовательского интерфейса, которые можно перетаскивать в любом месте страницы; и так далее…

Во-вторых, обратите внимание, что позиция элемента изменилась — это потому, что top, bottom, left (en-US), и right ведут себя по-другому с абсолютным позиционированием. Вместо того, чтобы позиционировать элемент на основе его относительного положения в обычном потоке макета документа, они определяют расстояние, на котором элемент должен находиться от каждой из сторон содержащего элемента. Поэтому в этом случае мы говорим, что абсолютно позиционированный элемент должен располагаться в 30px от верха «содержащего элемента» и 30px от левого края (В этом случае «содержащий элемент» является исходным содержащим блоком. См. раздел ниже для дополнительной информации).

Примечание: вы можете использовать top, bottom, left (en-US), и right для изменения размера элемента если вам надо. Попробуйте установить top: 0; bottom: 0; left: 0; right: 0; и margin: 0; для вашего позиционируемого элемента и посмотрите, что произойдёт! Потом снова все верните…

Примечание: Да, margin-ы все ещё влияют на позиционируемый элемент. Однако, схлопывания margin не происходит.

Контекст позиционирования

Какой элемент является «содержащим» относительно абсолютно позиционируемого элемента? Это очень сильно зависит от свойства позиции предка позиционируемого элемента (см. Определение содержащего блока).

Если никакие из элементов предков не имеют конкретно заданного свойства позиции, то по умолчанию все элементы предков будут иметь статическую позицию. В результате этого абсолютно позиционируемый элемент будет содержаться в исходным содержащем блоке. Исходный содержащий блок имеет размеры области просмотра, а также является блоком, содержащим элемент <html>. Проще говоря, абсолютно позиционируемый элемент будет отображаться за пределами элемента <html> и будет расположен относительно исходного окна просмотра.

Позиционируемый элемент вложен в <body> в исходном HTML, но в конечном макете он расположен на 30px от верхнего и левого края страницы. Мы можем изменить контекст позиционирования — относительно какого элемента позиционируется позиционируемый элемент. Это делается путём установки позиционирования на одном из предков элемента — на один из элементов, внутри которого он вложен (вы не можете позиционировать его относительно элемента, внутри которого он НЕ вложен). Чтобы продемонстрировать это, добавьте следующее объявление в правило вашего body:

Это должно дать следующий результат:

Позиционируемый элемент теперь располагается относительно элемента <body>.

Введение в z-index

Все это абсолютное позиционирование — хорошее развлечение, но кое-что чего мы ещё не рассмотрели — когда элементы начинают перекрываться, что определяет который из элементов будет появляться поверх другого элемента? В примере, который мы видели все это время, у нас имеется только один позиционируемый элемент в контексте позиционирования, и он появляется сверху поскольку позиционируемые элементы «побеждают» не позиционированные элементы. Что же насчёт того, когда мы имеем более одного?

Попробуйте добавить следующий CSS, чтобы сделать первый параграф так же абсолютно позиционированным:

p:nth-of-type(1) {
  position: absolute;
  background: lime;
  top: 10px;
  right: 30px;
}

На этом этапе вы увидите, что первый параграф окрашенный в лаймовый изъят из потока документа и помещён чуточку выше того места, где он был исходно. А также он расположен под оригинальным параграфом .positioned, где они оба перекрываются. Это потому что параграф .positioned является вторым параграфом по порядку в источнике и позже позиционируемые элементы в порядке источника выигрывают над ранее позиционируемыми элементами в порядке источника.

Можете ли вы изменить порядок наложения? Да, можете, используя свойство z-index. «z-index» это ссылка к z-оси. Вы можете вспомнить из предыдущих этапов в этом курсе, где мы обсуждали использование горизонтальных (x-ось) и вертикальных (y-оси) координат веб-страницами для определения позиции для таких вещей, как фоновые изображения и смещение теней. (0,0) находится наверху слева страницы (или элемента) и оси x- и y- направляются направо и вниз страницы (во всяком случае, для языков, направленных слева на право).

У веб-страниц также имеется z-ось: воображаемая линия, которая направляется от поверхности вашего экрана к вашему лицу (или что ещё вам нравится иметь перед экраном). Значения z-index влияют на то где позиционируемый элемент располагается на этой оси; положительные значения перемещают их выше по наложению, а отрицательные значения перемещают их ниже по наложению. По умолчанию все позиционируемые элементы имеют z-index auto, что фактически равно 0.

Для того чтобы изменить порядок наложения, попробуйте объявить для вашего p:nth-of-type(1) правила:

Теперь вы должны видеть законченный пример, с параграфом лаймового цвета сверху:

Обратите внимание что z-index принимает значения индекса только без единиц измерения; вы не можете задавать значения, что хотите, чтобы какой-то элемент был на 23 пикселя выше по z-оси — это так не работает. Более высокие значения будут располагаться над меньшими значениями и от вас зависит какие значения вы используете. Используя 2 и 3, вы получите тот же эффект что и 300 и 40000.

Фиксированное позиционированиее

А теперь давайте посмотрим на фиксированное позиционирование. Оно работает точно также как и абсолютное позиционирование, одним ключевым отличием: в то время как абсолютное позиционирование фиксирует элемент в месте относительно его ближайшего позиционированного предка (исходный содержащий блок если нет иного), фиксированное позиционирование обычно фиксирует элемент в месте относительно видимой части области просмотра, кроме случаев, когда один из его потомков является фиксированным блоком из-за того, что его свойству transform отличается от none. Это значит, что вы можете создать элементы пользовательского интерфейса, которые зафиксированы на месте, как постоянные меню навигации, которые всегда видимы вне зависимости от того сколько прокручивается страница.

Давайте составим простой пример, чтобы показать, что мы имеем в виду. Во-первых, удалите существующие правила p:nth-of-type(1) и .positioned из вашего CSS.

А теперь, обновите правило body удалив объявление position: relative; и добавьте фиксированную высоту как тут:

body {
  width: 500px;
  height: 1400px;
  margin: 0 auto;
}

Теперь мы собираемся дать элементу <h2> (en-US) position: fixed;, а также заставить его располагаться на верху окна просмотра. Добавьте следующее правило в ваш CSS:

h2 {
  position: fixed;
  top: 0;
  width: 500px;
  margin-top: 0;
  background: white;
  padding: 10px;
}

top: 0; необходим чтобы приклеить его к верху экрана. мы дали заголовку ту же ширину что и колонкам с контентом и затем даём ему белый фон и немного padding и margin, чтобы контент не был видимым под ним.

Если вы сохраните и обновите сейчас, вы увидите маленький забавный эффект, при котором заголовок останется неизменным, а содержимое будет прокручиваться вверх и исчезать под ним. Но мы можем улучшить это — в данный момент некоторый контент начинается под заголовком. Это из-за того, что позиционируемый заголовок больше не появляется в потоке документа, поэтому остальное содержимое поднимается наверх. Нам надо сдвинуть все это немного вниз; мы можем сделать это установив немного верхнего margin к первому параграфу. Добавьте его сейчас:

p:nth-of-type(1) {
  margin-top: 60px;
}

Теперь вы должны видеть законченный пример:

position: sticky

Доступно другое значение позиции называемое position: sticky, которое несколько новее чем другие. По сути, это гибрид относительной и фиксированной позиции, который позволяет позиционируемому элементу вести себя как будто он относительно позиционирован, до тех пор пока он не будет прокручен до определённой пороговой точки (например, 10px от вершины окна просмотра), после чего он становится фиксированным. Это можно использовать, например, чтобы заставить панель навигации прокручиваться вместе со страницей до определённой точки, а затем задерживать в верхней части страницы.

.positioned {
  position: sticky;
  top: 30px;
  left: 30px;
}

Интересное и общее использование position: sticky заключается в создании индексных страниц с прокруткой, где разные заголовки липнут к верху страницы, когда они достигают его. Разметка такого примера может выглядеть так:

<h2>Sticky positioning</h2>

<dl>
    <dt>A</dt>
    <dd>Apple</dd>
    <dd>Ant</dd>
    <dd>Altimeter</dd>
    <dd>Airplane</dd>
    <dt>B</dt>
    <dd>Bird</dd>
    <dd>Buzzard</dd>
    <dd>Bee</dd>
    <dd>Banana</dd>
    <dd>Beanstalk</dd>
    <dt>C</dt>
    <dd>Calculator</dd>
    <dd>Cane</dd>
    <dd>Camera</dd>
    <dd>Camel</dd>
    <dt>D</dt>
    <dd>Duck</dd>
    <dd>Dime</dd>
    <dd>Dipstick</dd>
    <dd>Drone</dd>
    <dt>E</dt>
    <dd>Egg</dd>
    <dd>Elephant</dd>
    <dd>Egret</dd>
</dl>

CSS может выглядеть как показано ниже. В нормальном потоке элементы <dt> будут прокручиваться вместе с контентом. Когда мы добавляем position: sticky к элементу <dt>, вместе со значением top 0, поддерживающие браузеры будут приклеивать заголовки к вершине окна просмотра когда они будут достигать той позиции. каждый последующий заголовок будет затем заменять предыдущий при его прокрутке вверх к той позиции.

dt {
  background-color: black;
  color: white;
  padding: 10px;
  position: sticky;
  top: 0;
  left: 0;
  margin: 1em 0;
}

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

Вы достигли конца этой статьи, но помните ли вы самую важную информацию? Вы можете найти дальнейшую проверку что вы усвоили эту информацию прежде чем, отправитесь дальше — см. Проверьте свои навыки: Позиционирование.

Я уверен, что вы повеселились с основами позиционирования; хотя это не является методом, который вы бы использовали для целого макета, всё же как вы видите, существует много задач, подходящих для него.

Позиционирование в CSS | CSS-Tricks по-русски

Позиционирование в CSS

Позиционирование в CSS кажется довольно простым. Указываете какой блок и где должен находиться. Однако всё не так просто, как кажется на первый взгляд. Есть несколько моментов, которые могут запутать новичков. Вы сможете извлечь из позиционирования гораздо больше пользы, если детально разберётесь как оно работает.

Box-модель в CSS и типы позиционирования.

Прежде чем приступить, советую вам прочитать статью Box-модель в CSS. В двух словах: каждый элемент в html — это прямоугольник, для которого можно указать величины внутренних и внешних отступов, а также границу, которая разделяет их.

Схемы позиционирования определяют где должен располагаться этот прямоугольник, а также как он должен влиять на элементы вокруг себя.

Свойство position в CSS может принимать пять значений:

absolute
relative
fixed
static
inherit

Значение static используется по умолчанию. Любой элемент с позиционированием static находится в общем потоке документа. Правила для его размещения определяются Box-моделью. Для таких элементов, свойства top, right, bottom и left будут игнорироваться. Для того, чтобы использовать эти свойства, позиционирование элемента должно быть абсолютным (absolute), относительным (relative) или фиксированным (fixed).

Значение inherit, как и во всех остальных свойствах CSS, используется для того, чтобы элемент использовал тоже самое значение, что и родительский элемент.

Абсолютное позиционирование

Абсолютное позиционирование удаляет элемент из общего потока документа. Что касается элементов вокруг, то в этом случае они просто игнорируют искомый, как будто ему установлено свойство display: none;. Если вы не хотите чтобы пространство для такого элемента заполнялось другими элементами, то вам надо придумать другой подход.

Вы устанавливаете расположение элемента с абсолютным позиционированием, используя свойства top, left, right и bottom. Вам достаточно указать два из них, top или bottom и left или right. Если ни одного свойства не указано, то устанавливается 0 для пары top-left.

Ключевой момент в абсолютном позиционировании — это понимание того, что является точкой отсчёта. Если свойству top указано значение 20px, то откуда их необходимо отсчитывать.

Ответ прост: такие элементы позиционируются относительно ближайшего родительского элемента, для которого задано позиционирование отличное от static. Если такого элемента нет, то элемент позиционируется относительно основного документа. То есть при установки абсолютного позиционирования, CSS сообщает браузеру, чтобы он посмотрел на родительский элемент и, если его позиционирование не статическое, то надо выровнять текущий элемент относительно него.

Относительное позиционирование.

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

Представьте себе это так: некое изображение сдвигается, а на его месте остаётся «призрак», все элементы располагаются относительно этого «призрака». Это позволяет нам накладывать элементы друг на друга.

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

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

Фиксированное позиционирование

Фиксированное позиционирование действует подобно абсолютному, с небольшими различиями.

Во-первых, элемент с фиксированным позиционированием всегда располагается относительно окна браузера, родительские элементы при этом игнорируются.

Второе отличие исходит из его названия. Фиксированные элементы зафиксированы на странице. Они не смещаются при её прокручивании.

Z-index

Страница сайта двумерна. У неё есть ширина и высота. Z-index добавляет третье измерение, глубину.

Чем выше этот индекс тем выше на странице расположен элемент. С помощью него мы можем добиться чтобы один элемент располагался поверх другого. По умолчанию, его значение — ноль. Отрицательные значения также допустимы.

На самом деле, z-index гораздо сложнее, чем я его здесь описываю, но это тема для отдельной статьи. Сейчас, главное запомнить саму идею третьего измерения и то, что только позиционируемые элементы могут использовать это свойство.

Проблемы позиционирования.

Рассмотрим несколько общих проблем, связанных с позиционированием, а также несколько слов об их решении.

Вы не можете одновременно использовать свойство position и свойство float для одного и того же элемента. Оба эти свойства влияют на позицию элемента, поэтому использоваться будет свойство, указанное последним. Из комментариев:
Одновременно можно использовать position:relative и float.
Когда одновременно указывается position:absolute и float, то применяется не последнее указанное свойство. В этом случае, независимо от порядка следования этих стилей, применяется position:absolute, а итоговое (или вычисленное) значение свойства float устанавливается в none, независимо от начального значения, т.е. игнорируется.
Внешние отступы не «схлопываются» у элементов с абсолютным позиционированием. Допустим на странице есть параграф с нижним отступом в 20px. Следом за ним размещается картинка с верхним полем 30px. Расстояние между картинкой и текстом будет не 50px (20px + 30px), а 30px (30px > 20px). Такое поведение называется collapsing margins. Два отступа комбинируются в один. У элементов с абсолютным позиционированием нет полей для «схлопывания», поэтому результат может отличаться от ожидаемого.
IE и z-index. В IE6 выбор элемент происходит всегда на вершине стека, независимо от его z-index-а, z-index-ов окружающих элементов.

В IE6 и IE7 есть ещё одна проблема с z-index-ом. IE смотрит на родительский элемент для определения в какой группе элементов находится вершина стека, остальные браузеры используют глобальный контекст. Например:


<div>
  <p></p>
</div>
<img />

Мы ожидаем, что параграф будет находиться выше, чем изображение, поскольку его z-index больше. Однако IE6 и IE7 располагают выше картинку, поскольку они находятся в разных стеках документа. Один стек для div, второй для img, а у картинки z-index выше, чем у div-а.

Заключение

Свойство position устанавливает поведение расположения элемента в соответствии с одной из схем позиционирования. Доступные значения свойства: absolute, relative, fixed, static (по умолчанию) и inherit.

Схемы позиционирования определяют правила размещения элемента на web-странице, а также влияние на расположение соседних элементов.

Свойство z-index может быть применено только для элементов с установленным свойством position. Оно добавляет третье измерение на странице и устанавливает порядок стека элементов.

Свойство position кажется лёгким для восприятия, но работает немного иначе, чем кажется с первого взгляда. Зачастую разработчики думают что им необходимо относительное позиционирование, хотя скорее всего надо использовать абсолютное. В основном при вёрстке используется свойство float, а свойство position необходимо для элементов, которые вы хотите «вырвать» из общего потока документа.

Как расположить несколько блоков div в ряд?

Одной из самых частых задач в вёрстке страницы — равномерное расположение блоков div по горизонтали с возможностью переноса на следующую строку. Для этого блоки нужно расположить в однин горизонтальный ряд. При этом, при масштабировании окна браузера они должны равномерно переноситься. Или при выводе изображений из базы данных, например аватаров, нужно чтобы картинки были все в один ряд. Как это сделать?

Располагаем n блоков div в горизонтальный ряд

Всё достаточно просто. Воспользуемся свойством float (выравнивание с обтеканием). Важно, чтобы минимальная ширина страницы/окна/родительского элемента позволяла вместить в себя как минимум два. Остальные блоки переносятся на следующую строку.

Как запретить обтекание блоков <div>

Бывает так, что одна строка может наехать на другую. Для этого отменим обтекание свойством clear. Зададим его для div, который будет размером по высоте в 1 пиксель и ширине 100%. При надобности, такими пустыми блоками DIV можно запретить обтекание всех внутренних блоков, сверху и снизу.

Теперь к практике, примерам и исходникам…

Пример горизонтального расположения нескольких блоков <div>

Всем div мы присвоим параметр float:left. Для наглядности создадим 6 таких блоков:

DIV 1 DIV 2 DIV 3 DIV 4 DIV 5 DIV 6

   <!-- ------- установим стили блока DIV -------- -->

<style>

#line_block { 

        width:110px; 

        height:50px; 

        background:#f1f1f1; 

        float:left; 

        margin: 0 15px 15px 0; 

        text-align:center;

        padding: 10px;

        }

</style>

   <!-- ---------- вставим блоки на страницу --------- -->

<div style="width:100%; height:1px; clear:both;"></div> <!-- выравниваем без обтекания --><div id="line_block">DIV 1</div> 

<div id="line_block">DIV 2</div> 

<div id="line_block">DIV 3</div>

<div id="line_block">DIV 4</div>

<div id="line_block">DIV 5</div>

<div id="line_block">DIV 6</div>
<div style="width:100%; height:1px; clear:both;"></div> <!-- выравниваем без обтекания -->

Смотрим пример работы и скачиваем исходники: Демонстрация Скачать исходники

Рекомендую масштабировать страницу и посмотреть за поведением элементов.

Если задача состоит в том, чтобы расположить два больших блока в один ряд, то нужно float для них задать left для одного и right для другого. Опять же, ширина блоков не должна превышать ширину страницы/окна/родителя, иначе они перенесутся на следующую строку.

Спасибо за внимание! Удачи в вёрстке!

Урок: блоки в одну строку CSS

Для того, чтобы выстроить блоки в одну строку с помощью CSS необходимо понимать, что выстраиваемые блоки представляют собой не просто какие-то разрозненные блоки, а группу. Понимая это необходимо объединить их. Объединение осуществляется с помощью заключения всех блоков в какой-то другой блок, который будет «родительским» по отношению к этой группе.

Группа блоков внутри родительского блока:

<div>

<div>Текст текст текст текст текст текст</div>

<div>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</div>

<div>Тексттекст текст текст текст текст текст текст текст текст текст текст текст текст</div>

<div>Тексттекст текст текст</div>

</div>

Пусть будет известно, что будут располагаться блоки в одну строку и их количество будет равно 4-м, зная это можно рассчитать ширину блоков и отступов между ними в относительных величинах — в процентах.

Так как для дочерних блоков 100% ширины — это вся ширина родительского блока. Из этого следует, что для получения максимальной ширины дочернего блока, при расположении блоки в одну строку, надо воспользоваться формулой: 100 / 4 = 25, где 100 — это ширина родительского блока, а 4 — количество дочерних. Получается, что каждый блок должен быть не шире 25%, чтобы расположить блоки на одной строке.

Так как между блоками должно быть расстояние, чтобы они не «слипались», то необходимо рассчитать ширину отступа между блоками.

Количество отступов между блоками меньше количество самих блоков на единицу, то есть в данном случае отступов будет 3.

Если взять отступ равный 2%, то получится, что ширина каждого блока должна быть 23,5%: 4 * 23,5 + 3 * 2 = 100. Получается, что сумма всех ширин, включая отступы, по прежнему составляет 100%, как и должно быть.

CSS определяющий ширину блока и отступ справа:

.parent > div {

background: #eee;

float: left;

width: 23.5%;

margin-right: 2%;

}

Данный код означает следующее: все блоки DIV, являющиеся первым вложением в блок с классом parent должны обладать следующими свойствами: Цвет фона — серый, ширина блока — 23,5%, внешний отступ справа — 2% и размещение блока — слева.

При таком написании получается, что каждый блок имеет отступ, а нам необходимо, чтобы отступ был у всех, кроме последнего, так как иначе не получается расположить блоки в одну строку, поэтому нужно добавить дополнительное описание.

Обнуление отступа для последнего дочернего элемента группы:

.parent > div:last-child {

margin-right: 0;

}

Теперь отступы будут иметь все дочерние блоки, кроме последнего.

Если в каждом блоке написать какой-либо текст, то он прилипнет к границам блока, что не очень красиво, следовательно нужно сделать внутренний отступ, например равный 10px, а для того, чтобы подчеркнуть, что блоки являются отдельными, нарисуем им границы.

CSS примет следующий вид:

.parent > div {

background: #eee;

float: left;

width: 23.5%;

margin-right: 2%;

padding: 10px;

border: 1px solid #ccc;

}

В этом случае блоки в одну строку снова перестанут умещаться, так как по умолчанию внутренние отступы и границы влияют на ширину блока увеличивая ее. То есть если блок имел ширину 23,5%, то после нововведений он будет иметь ширину 23,5% + 2 * 10 + 2 * 1 — ширина самого блока плюс ширина отступа с каждой стороны, плюс ширина рамки с каждой стороны. Чтобы ширина блока считалась с учетом внутренних отступов и рамок необходимо использовать свойство box-sizing.

CSS с указанием, что ширина блока должна учитывать внутренние отступы и границы:

.parent > div {

background: #eee;

float: left;

width: 23.5%;

margin-right: 2%;

padding: 10px;

border: 1px solid #ccc;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

Результат — блоки в одну строку:

CSS: position. Примеры с позиционированием

Позиционирование задаётся с помощью свойства position. Свойство может иметь пять значений:

static — нормальное (статичное) позиционирование
relative — относительное позиционирование
absolute — абсолютное позиционирование
filxed — фиксированное позиционирование
sticky — липкое позиционирование

Свойство position не наследуется, так что для дочерних элементов его требуется указывать явно.

Свойство z-index работает только для элементов, у которых position задано как relative, absolute или fixed.

Разобраться с отдельными видами позиционирования просто. Проблемы начинаются, когда начинаешь комбинировать разные стили. Если работаешь с позиционированием периодически, то многие детали забываются и приходится заново вспоминать тонкости. Эта статья и написана для подобных случаев.

Создадим заготовку — один контейнер, в котором разместим три блока.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        .parent{
            background-color: gray;
			width: 400px;
        }
		.child{
            height: 50px;
        }
        .child-one {
            background-color:aqua;
        }
        .child-two {
            background-color: honeydew;
        }
        .child-three{
            background-color: burlywood;
        }
    </style>
</head>
<body>
    <div>
        I am a parent
        <div>First Child</div>
        <div>Second Child</div>
        <div>Third Child</div>
    </div>
    
</body>
</html>

Нормальное позиционирование: static

Нормальное (статичное) позиционирование — это обычное поведение блочных элементов в том порядке, в котором они прописаны в коде сверху вниз. Его не нужно прописывать, потому что оно стоит по умолчанию. Но иногда position: static используют, чтобы отменить другой вид позиционирования при определённых событиях на веб-странице в сценариях JavaScript или в эффектах CSS для возврата к начальному значению (например, в свойстве :hover).

Для нормального позиционирования характерны следующие особенности:

элементы выводятся в том порядке, как они описаны в коде
свойства left, right, top, bottom, z-index не работают, применять их нет смысла

Наша заготовка как раз использует нормальное позиционирование и здесь всё понятно.

Относительное позиционирование: relative

Относительное позиционирование записывается так – position: relative. Изменяет положение элемента от его исходного расположения. Координаты задаются такими же свойствами, как и при абсолютном позиционировании — left, right, top, bottom. Единственное существенное отличие заключается в том, что элемент формально не выпадает из потока – под него остаётся место.

Работу этого значения можно сравнить с visibility: hidden, когда элемент скрывается со страницы, но место под него остаётся нетронутым. Блок можно двигать куда угодно, но место под него остаётся пустым и его не займут другие части.

Если элемент выходит за пределы окна браузера, то появится горизонтальная или вертикальная полосы прокрутки.

Помните, что смещение происходит не от краёв окна браузера, а от того места, где изначально стоял блок.

Допустим мы хотим сместить первый дочерний элемент влево и вниз.


.child-one {
    background-color:aqua;
    position: relative;
    left: 20px;
    top: 10px;
}

Первый блок сдвинется вправо на 20 пикселей. При этом его правая часть выходит за пределы родительского контейнера, а нижняя часть налезает на второй блок, частично перекрывая его. Кстати, можно задавать и отрицательные значения.

Абсолютное позиционирование: absolute

При задании подобного позиционирования элемент перестаёт существовать в потоке документа и его положение задаётся относительно краёв браузера или родительского окна.

Ширина элемента, если она не задана явно, определяется шириной содержимого с учётом padding, border и margin. Элемент не меняет своё исходное положение, если у него нет свойств right, left, top и bottom. Одновременно указанные свойства left и right формируют ширину элемента, но только если width не указано. Если добавить свойство width, то значение right будет проигнорировано. Аналогично с высотой элемента при использовании свойств top, bottom и height.

Свойства left и top имеют более высокий приоритет по сравнению с right и bottom. Если left и right противоречат друг другу, то значение right игнорируется. То же самое касается и bottom.

Если left задать отрицательное значение, то элемент уйдёт за левый край браузера, но полоса прокрутки при этом не появится. Аналогично со свойством top, когда элемент уходит за верхний край.

Если left задать значение больше ширины видимой области или указать right с отрицательным значением, то появится горизонтальная полоса прокрутки. Аналогично и с top — появится вертикальная полоса прокрутки.

Элемент перемещается вместе с документом при его прокрутке. Свойство z-index работает, при этом абсолютно позиционированные элементы перекрывают статичные элементы, даже если они в коде ниже.

Абсолютное позиционирование позволяет скрывать элементы. Для этой цели часто добавляется стиль left: -9999px, который переносит элемент далеко влево за область просмотра. В частности, этот приём используется для стилизации переключателей и флажков, когда скрывают настоящий флажок, а вместо него стилизуют элемент label, связанный с input и выполняющим его функции.

Применим абсолютное позиционирование к первом блоку.


.child-one {
    position: absolute;
}

Блок теряет свои привычные свойства и полностью выпадает из потока. Другие блоки перестают замечать его, но при этом элемент остаётся на странице, занимая левую верхнюю позицию в родительском контейнере и сжимаясь.

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


.child-one {
    position: absolute;
    top: 5px;
    left: 5px;
}

Сюрприз! Блок разместился в указанной позиции относительно окна браузера, а не своего родительского контейнера, так как на самом деле блок выпал из него. Это справедливо, если родительский блок имеет статичное позиционирование (static), которое в нашем случае опущено, так как используется по умолчанию.

Если же мы хотим всё-таки поменять систему координат и вычислять абсолютную позицию от родительского контейнера, то тогда родительскому блоку следует присвоить относительное позиционирование.


.parent{
    position: relative;
}

Запоминаем связку: родитель (относительное) — дочерний (абсолютное). По умолчанию перемещение происходит относительно сторон окна браузера, но если у родительского элемента задано position: relative, то произойдёт смена системы координат и смещение происходит относительно родительского блока. Значения padding не учитываются.

На самом деле, родительский блок мог иметь любые другие значения, кроме static. Если попробовать связку absolute-absolute, то ничего не изменится.

Абсолютное позиционирование часто применяется для точной расстановки отдельных элементов. Разместим первый блок в нижнем правом углу родителя.


.child-one {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 40px;
    height: 40px;
}

Фиксированное позиционирование: fixed

Фиксированное позиционирование по своему действию похоже на абсолютное позиционирование, но в отличие от него привязывается к указанной позиции свойствами left, top, right и bottom и не меняет своего положения при прокрутке веб-страницы.

Распространённый вариант, когда при прокрутке элемент словно приклеивался к одному месту. Например, часто используется в шапке сайта. Для этого нужно записать:


.child-one {
    position: fixed;
    top: 5px;
    left: 5px;
}

По поведению фиксированное смещение схоже с абсолютным – элемент выпадает из нормального потока, его место освобождается и другие элементы вообще его не замечают. С помощью такого приёма можно очень легко сделать верхние, нижние, боковые панели на странице, которые не будут исчезать при прокрутке и всегда будут находиться на виду.

Также может использоваться для вывода диалоговых окон — при этом фиксированное сообщение невозможно прокрутить вверх или вниз, оно всегда остаётся на своём месте.

Липкое позиционирование — sticky

Липкое позиционирование обычно применяется для фиксации заголовка на одном месте, пока содержимое, к которому относится заголовок, прокручивается на странице. Если родительский блок уходит вверх, то фиксированный блок также уходит с ним. Это лучше смотреть самостоятельно.


.child-one {
    position: sticky;
    top: 5px;
    left: 5px;
}

Элементы и методы макета HTML

Веб-сайты часто отображают контент в несколько столбцов (например, журнал или газета).

Пример

Лондон — столица Англии. Это самый густонаселенный город Соединенного Королевства, в котором проживает более 13 миллионов жителей.

Лондон, расположенный на берегу Темзы, был крупным поселением на протяжении двух тысячелетий, его история восходит к моменту основания римлянами, которые назвали его Лондиниум.

Попробуй сам »

Элементы макета HTML

HTML имеет несколько семантических элементов, которые определяют различные части веб-страницы:

— Определяет заголовок для документа или раздела

— Определяет набор навигационных ссылок

— Определяет раздел в документе

— Определяет независимый, автономное содержимое

— определяет содержимое помимо содержимого (например, боковую панель)

— определяет нижний колонтитул для документа или раздела

— определяет дополнительные сведения что пользователь может открывать и закрывать по запросу

— Определяет заголовок для элемента

— Определяет заголовок для документа или раздела
— Определяет набор навигационных ссылок
<раздел> — Определяет раздел в документе
— Определяет независимый, автономный содержание
— Определяет содержимое помимо содержимого (например, боковую панель)
<нижний колонтитул> — Определяет нижний колонтитул для документа или раздела
<подробности> — Определяет дополнительные сведения что пользователь может открывать и закрывать по запросу
— Определяет заголовок для элемента

Подробнее о семантических элементах можно прочитать в нашем Глава Семантика HTML.

Методы макета HTML

Существует четыре различных метода создания многоколоночных макетов. Каждый у техники есть свои плюсы и минусы:

CSS-фреймворк
CSS свойство float
CSS Flexbox
CSS-сетка

CSS-фреймворки

Если вы хотите быстро создать свой макет, вы можете использовать фреймворк CSS, например W3.CSS или Bootstrap.

CSS Float Layout

Обычно целые веб-макеты создаются с использованием CSS. float недвижимость.Float легко научиться — просто нужно вспомнить, как у плавают и очистить свойств работают. Недостатки: Плавающие элементы привязаны к документообороту, что может навредить гибкость. Узнайте больше о float в нашем CSS Плавайте и очищайте главу.

Пример

Попробуй сам »

Макет CSS Flexbox

Использование flexbox гарантирует, что элементы ведут себя предсказуемо, когда макет страницы должны соответствовать разным размерам экранов и различным устройствам отображения.

Узнайте больше о flexbox в нашем Глава CSS Flexbox.

Пример

Попробуй сам »

Макет сетки CSS

Модуль макета сетки CSS предлагает систему макета на основе сетки со строками и столбцами, упрощение разработки веб-страниц без использования плавающих элементов и позиционирования.

Узнайте больше о сетках CSS в нашем Глава CSS Grid View.

HTML-классы — Атрибут класса

Атрибут класса HTML используется для указания класса для элемента HTML.

Несколько элементов HTML могут использовать один и тот же класс.

`Использование атрибута класса`

Атрибут класса часто используется для указания к имени класса в таблице стилей. Он также может использоваться JavaScript для доступа и манипулировать элементами с определенным именем класса.

В следующем примере у нас есть три элемента

  с атрибутом  класса  со значением
"город". Все три   элементы будут стилизованы в соответствии с .город  определение стиля в головном разделе:
 Пример 
 
 
 
 
 .city {
 background-color: помидор; 
 цвет: белый; 
 граница: сплошной черный цвет 2px; 
 маржа: 20 пикселей; 
 отступ: 20 пикселей; 
} 
 
 
 Лондон 
 
 Лондон - столица Англии.
 
 
 Париж 
 
 Париж - столица Франции.
 
 
 Токио 
 
 Токио - столица Японии.
 
  
 Попробуй сам " В следующем примере у нас есть два элемента    с атрибутом  класса  со значением
"Примечание". Оба    элементы будут иметь одинаковый стиль в соответствии с  .note  определение стиля в головном разделе:
 Пример 
 
 
 
 
.примечание {
 размер шрифта: 120%; 
 цвет: красный; 
} 
 
 Мой 
 важный  заголовок 
 Это какой-то  важный  текст.
 
 Попробуй сам "  Совет:  Атрибут  class  можно использовать для  любого HTML-элемента .
  Примечание:  Имя класса чувствительно к регистру!
  Совет:  Вы можете узнать больше о CSS в нашем Руководстве по CSS.
 Синтаксис для класса 
 Для создания класса; напишите символ точки (.), за которым следует
название класса.
Затем определите свойства CSS в фигурных скобках {}:
 Пример 
 Создайте класс с именем "city":
 
 
 
 
. Город {
 цвет фона: помидор; 
 цвет: белый; 
 отступ: 10 пикселей; 
 } 
 
 Лондон 
 
 Лондон - столица Англии.
 Париж 
 
 Париж - столица Франции.
 Токио 
 
 Токио - столица Японии.
 
 
 Попробуй сам "
 Несколько классов 
 HTML-элементов могут принадлежать более чем к одному классу.
 Чтобы определить несколько классов, разделите имена классов пробелом, например
. Элемент будет оформлен в соответствии со всеми
указанные классы.
 В следующем примере первый элемент 
  принадлежит как  класс города , а также класс  основной ,
и получит стили CSS от обоих классов:
 Пример 
 Лондон 
 
 Париж 
 
 Токио 
 
 Попробуй сам "
 Различные элементы могут иметь один и тот же класс 
 Различные элементы HTML могут указывать на одно и то же имя класса.
 В следующем примере и 
 , и   указывает на "городской" класс
и будут использовать тот же стиль:
 Пример 
 Париж 
 
 Париж - столица Франции
 
 Попробуй сам "
 Использование атрибута class в JavaScript 
 Имя класса также может использоваться JavaScript для выполнения определенных задач для
конкретные элементы.
 JavaScript может получить доступ к элементам с определенным именем класса с помощью метода  getElementsByClassName () :
 Пример 
 Нажмите кнопку, чтобы скрыть все элементы с именем класса
«город»:
 Попробуй сам " Не беспокойтесь, если вы не понимаете код в приведенном выше примере.
 Вы узнаете больше о JavaScript в нашей главе HTML JavaScript, или вы можете изучить наши
Учебник по JavaScript.
 Краткое содержание главы 
 Атрибут HTML  class  определяет один или
другие имена классов для элемента
 Классы используются CSS и JavaScript для выбора и доступа к определенным
элементы
 Атрибут  класса  можно использовать на любом
HTML-элемент
 Имя класса чувствительно к регистру
 Различные элементы HTML могут указывать на одно и то же имя класса
 JavaScript может получить доступ к элементам с определенным именем класса с помощью  getElementsByClassName ()  метод
 Упражнения HTML 
 
 
 Макет и содержащий блок - CSS: каскадные таблицы стилей 
 На размер и положение элемента часто влияет его блок , содержащий .Чаще всего содержащий блок является областью содержимого ближайшего предка элемента на уровне блока, но это не всегда так. В этой статье мы исследуем факторы, определяющие блок, в котором находится элемент.
 Когда пользовательский агент (например, ваш браузер) размещает документ, он создает поле для каждого элемента. Каждый ящик разделен на четыре области:
 Область содержимого
 Область набивки
 Пограничный район
 Маржа
 Многие разработчики считают, что содержащий блок элемента всегда является областью содержимого его родительского элемента, но это не обязательно так.Давайте исследуем факторы, определяющие, что такое блок, содержащий элемент.
 Прежде чем узнать, что определяет содержащий блок элемента, полезно знать, почему это вообще важно.
 На размер и положение элемента часто влияет его содержащий блок. Значения в процентах, которые применяются к ширине  , высоте  , заполнению  , полям   и свойствам смещения абсолютно позиционированного элемента (т.е.е., для которого позиция   установлена на  абсолютный  или  фиксированный ) вычисляются из содержащего блок элемента.
 Процесс идентификации содержащего блока полностью зависит от значения свойства  position  элемента:
 Если свойство  position  имеет значение   static  ,   relative  , or   sticky  , содержащий блок формируется краем  поля содержимого  ближайшего элемента-предка, который является либо  контейнер блока  (такой как встроенный блок, блок или элемент списка) или  устанавливает контекст форматирования  (например, контейнер таблицы, контейнер гибкости, контейнер сетки или сам контейнер блока).
 Если свойство  position  имеет значение   absolute  , содержащий блок формируется краем поля заполнения   ближайшего элемента-предка, который имеет значение  position , отличное от  static  ( fixed ,  абсолютный , относительный   или  липкий ).
 Если свойство  position  -   fixed  , содержащий блок устанавливается окном просмотра (в случае непрерывного носителя) или областью страницы (в случае постраничного носителя).
 Если свойство  position  имеет значение   absolute   или   fixed  , содержащий блок также может быть сформирован краем поля заполнения   ближайшего элемента-предка, который имеет следующее: Преобразование   или перспектива   значение, отличное от  нет 
  изменит значение   преобразовать  или перспективу  
 Фильтр  Значение , отличное от  нет  или  изменит значение  фильтра   (работает только в Firefox).
 A  содержит значение  из  краска  (например,  содержит: краска; )
  Примечание:  Содержащий блок, в котором находится корневой элемент ( ), представляет собой прямоугольник, называемый  начальным содержащим блоком . Он имеет размеры области просмотра (для непрерывных носителей) или области страницы (для постраничных носителей).
 Как отмечалось выше, когда определенным свойствам присваивается процентное значение, вычисленное значение зависит от блока, содержащего элемент.Свойства, которые работают таким образом:  свойства блочной модели  и  свойства смещения :
 Свойства  height ,  top  и  bottom  вычисляют процентные значения от высоты   содержащего блока.
 Свойства  width ,  left ,  right ,  padding  и  margin  вычисляют процентные значения из ширины   содержащего блока.
 HTML-код для всех наших примеров:
  
  <раздел>
     Это абзац!



   В каждом приведенном ниже примере изменяется только CSS.
 Пример 1 
 В этом примере абзац позиционируется статически, поэтому его содержащий блок - 
 , потому что это ближайший предок, который является контейнером блока.
  кузов {
  фон: бежевый;
}

раздел {
  дисплей: блок;
  ширина: 400 пикселей;
  высота: 160 пикселей;
  фон: светло-серый;
}

п {
  ширина: 50%;
  высота: 25%;
  маржа: 5%;
  набивка: 5%;
  фон: голубой;
}
  
 Пример 2 
 В этом примере содержащим блоком абзаца является элемент  , потому что 
  не является контейнером блока (из-за  display: inline ) и не устанавливает контекст форматирования .
  кузов {
  фон: бежевый;
}

раздел {
  дисплей: встроенный;
  фон: светло-серый;
}

п {
  ширина: 50%;
  высота: 200 пикселей;
  фон: голубой;
}
  
 Пример 3 
 В этом примере блок содержания абзаца - 
 , потому что позиция  последнего  равна  абсолютному . На процентные значения абзаца влияет заполнение   содержащего его блока, хотя, если бы значение  размера блока  содержащего блока было бы  border-box , это было бы не так.
  кузов {
  фон: бежевый;
}

раздел {
  позиция: абсолютная;
  слева: 30 пикселей;
  верх: 30 пикселей;
  ширина: 400 пикселей;
  высота: 160 пикселей;
  отступ: 30 пикселей 20 пикселей;
  фон: светло-серый;
}

п {
  позиция: абсолютная;
  ширина: 50%;
  высота: 25%;
  маржа: 5%;
  набивка: 5%;
  фон: голубой;
}
  
 Пример 4 
 В этом примере позиция  абзаца  - это  фиксированный , поэтому содержащий его блок является начальным содержащим блоком (на экранах, в области просмотра).Таким образом, размеры абзаца меняются в зависимости от размера окна браузера.
  кузов {
  фон: бежевый;
}

раздел {
  ширина: 400 пикселей;
  высота: 480 пикселей;
  маржа: 30 пикселей;
  отступ: 15 пикселей;
  фон: светло-серый;
}

п {
  положение: фиксированное;
  ширина: 50%;
  высота: 50%;
  маржа: 5%;
  набивка: 5%;
  фон: голубой;
}
  
 Пример 5 
 В этом примере позиция  абзаца  равна  абсолютному , поэтому его содержащий блок - 
 , который является ближайшим предком со свойством  transform , которое не  none .
  кузов {
  фон: бежевый;
}

раздел {
  преобразовать: повернуть (0deg);
  ширина: 400 пикселей;
  высота: 160 пикселей;
  фон: светло-серый;
}

п {
  позиция: абсолютная;
  слева: 80 пикселей;
  верх: 30 пикселей;
  ширина: 50%;
  высота: 25%;
  маржа: 5%;
  набивка: 5%;
  фон: голубой;
}
  
 Ключевые концепции CSS:
Синтаксис CSS,
по правилу
Комментарии,
специфичность и
наследование,
коробка,
режимы компоновки и
модели визуального форматирования,
и падение маржи,
или начальный,
вычислено,
решено,
указано,
использовал,
и фактические значения.Определения синтаксиса значений,
сокращенные свойства
и заменил элементы.
 Свойство  all  сбрасывает все объявления CSS в заданное известное состояние
 Модель визуального форматирования 
 Модель визуального форматирования
 В этой и следующей главах описывается модель визуального форматирования: как пользователь
агенты обрабатывают дерево документов
для визуальных медиа.
 В модели визуального форматирования каждый элемент в дереве документа
генерирует ноль или более ящиков в соответствии с ячейкой
модель.Расположение этих блоков регулируется:
 Свойства, определенные в этой и следующей главах, применяются к обоим
непрерывные СМИ и
страничные СМИ.
Тем не менее
значение маржи
Свойства различаются при применении к страничным носителям (подробности см. в модели страницы).
 Модель визуального форматирования не определяет все аспекты
форматирование (например, в нем не указан алгоритм межбуквенного интервала). Соответствующие пользовательские агенты могут вести себя
иначе для тех проблем форматирования, которые не рассматриваются в этом
Технические характеристики.
 9.1.1 Область просмотра 
 Пользовательские агенты для непрерывных носителей
обычно предлагают пользователям  viewport  (окно или другое
область просмотра на экране), через которую пользователи обращаются к
документ. Пользовательские агенты могут изменять макет документа, когда
размер области просмотра изменяется (см. исходный содержащий блок).
 Когда область просмотра меньше, чем область холста, на котором
документ отображается, пользовательский агент должен предлагать прокрутку
механизм. Есть самое большее
одно окно просмотра на холст, но пользователь
агенты могут выполнять рендеринг на более чем один холст (т.е., предоставьте разные
просмотры того же документа).
 9.1.2
Содержащие блоки 
 В CSS 2.1 многие положения и размеры блоков рассчитываются с учетом
к краям
прямоугольной коробки под названием , содержащей блок . В
в общем, сгенерированные блоки действуют как содержащие блоки для потомков
коробки; мы говорим, что бокс «устанавливает» содержащий его блок
потомки. Фраза «блок, содержащий блок» означает «
содержащий блок, в котором находится "ящик", а не тот, который он генерирует.
 Каждой коробке дается позиция относительно содержащего ее блока,
но он не ограничен этим содержащим блоком; он может переполниться.
 Подробная информация о
как рассчитываются размеры содержащего блока, описано в
следующая глава.
 В следующих разделах описаны типы ящиков, которые могут быть
сгенерирован в CSS 2.1. Тип бокса частично влияет на его поведение в
модель визуального форматирования. Свойство display, описанное ниже,
указывает тип коробки.
 9.2.1 Элементы уровня блока и блоки блоков 
  Элементы уровня блока  - это те элементы исходного документа, которые визуально отформатированы как
блоки (например, абзацы). Следующие значения свойства display делают элемент
уровень блока: «блок», «элемент списка» и «таблица».
  Блочно-уровневый
боксы  - это боксы, которые участвуют в
контекст форматирования блока. Каждый
элемент уровня блока генерирует  основных блока уровня
блок , содержащий блоки потомков и сгенерированный
контент, а также ящик, участвующий в любой схеме позиционирования.Некоторые элементы блочного уровня могут дополнительно генерировать дополнительные блоки.
к
основное поле: элементы 'list-item'. Эти дополнительные коробки
размещены по отношению к основному ящику.
 За исключением ящиков стола, которые описаны в следующей главе, и
замененные элементы, блок уровня блока также является блоком контейнера блока.
Блок  контейнерный ящик  либо
содержит только блоки уровня блока или устанавливает встроенное форматирование
context и, следовательно, содержит только блоки встроенного уровня. Не весь блок
Контейнерные боксы представляют собой блоки уровня блока: незамещенные встроенные блоки
и незамещенные ячейки таблицы являются блочными контейнерами, но не уровнями блоков
коробки.Блоки уровня блока, которые также являются блок-контейнерами,
называется блоком  ящики .
 Три термина «блок уровня блока», «блок контейнера блока» и
«блок-бокс» иногда сокращенно обозначается как «блок», если это недвусмысленно.
 9.2.1.1 Анонимные блоки блоков 
 В таком документе:
 

  Какой-то текст
   Еще текст

  
 (и предполагая, что у DIV и P есть 'display: block'),
DIV, похоже, имеет как встроенный контент, так и контент блока.Чтобы сделать это
проще определить форматирование, мы предполагаем, что есть анонимный блок-бокс   вокруг «Какой-то текст».
 [D]
 Диаграмма, показывающая
три ящика, один из которых анонимный, для примера выше.
 Другими словами: если блок контейнера блока (например, сгенерированный
для DIV выше) имеет внутри блок уровня блока (например, P
выше), затем мы заставляем его иметь  только  блока уровня блока
внутри него.
 Если встроенный блок содержит блок на уровне входящего потока, встроенный блок
(и его встроенные предки в том же строчном поле) разбиты вокруг
блок уровня блока (и все братья и сестры уровня блока, которые являются последовательными
или разделены только сворачиваемыми пробелами и / или вне потока
элементов), разделив встроенный блок на два блока (даже если
сторона пуста), по одному с каждой стороны блока (ов) уровня блока.Линия
коробки до перерыва и после
break заключены в анонимные блоки блоков, а блок уровня блока
становится братом этих анонимных ящиков. Когда такой встроенный блок
зависит от относительного позиционирования, любой результирующий перевод также
влияет на блок уровня блока, содержащийся во встроенном блоке.
 Примеры:
 Эта модель применима в следующем примере, если следующие
правила:
 
p {display: inline}
диапазон {дисплей: блок}
  
 были использованы с этим HTML-документом:
 

<ГОЛОВА>
 Анонимный текст прерван блоком 

<ТЕЛО>

  Это анонимный текст перед SPAN. 
 Это содержание SPAN. 
  Это анонимный текст после SPAN. 


  
 Элемент P содержит фрагмент (C1) анонимного текста, за которым следует
элементом уровня блока, за которым следует еще один фрагмент (C2) анонимного
текст. Получающиеся коробки будут блоком, представляющим ТЕЛО,
содержащий анонимный блок вокруг C1, блок блока SPAN и
еще один анонимный блок-бокс вокруг C2.
 Свойства анонимных ящиков унаследованы от
включающий неанонимный блок (например, в примере чуть ниже заголовка подраздела «Анонимные блоки блоков», тот для DIV).
Неунаследованные свойства имеют свое начальное значение. Например,
шрифт анонимного блока унаследован от DIV, но
поля будут равны 0.
 Свойства, заданные для элементов, которые вызывают анонимные блоки блоков
сгенерированные по-прежнему применяются к блокам и содержимому этого элемента. Для
Например, если граница была установлена на элементе P в приведенном выше
Например, граница будет нарисована вокруг C1 (открыта в конце
line) и C2 (открываются в начале строки).
 Некоторые пользовательские агенты реализовали границы встроенных строк, содержащих
блоки другими способами, например, путем помещения таких вложенных блоков внутрь
"анонимные линейные блоки" и, таким образом, рисуя строчные границы вокруг таких
коробки. Поскольку CSS1 и CSS2 не определяют это поведение, CSS1-only и
Пользовательские агенты, поддерживающие только CSS2, могут реализовать эту альтернативную модель и по-прежнему
заявить о соответствии этой части CSS 2.1. Это не относится к UA.
разработан после того, как эта спецификация была выпущена.
 Анонимные блоки блоков игнорируются при разрешении процентных значений
что будет относиться к нему: используется ближайший неанонимный предок
вместо.Например, если дочерний элемент анонимного блока внутри
DIV выше должен знать высоту содержащего его блока, чтобы
разрешить процентную высоту, тогда он будет использовать высоту
содержащий блок, образованный DIV, а не анонимным блоком.
 9.2.2 Встроенные элементы и встроенные блоки 
  Встроенный уровень
элементы  - это те элементы исходного документа, которые
не формировать новые блоки контента; контент распределен по строкам
(например, выделенные фрагменты текста
внутри абзаца, встроенные изображения,
и т.п.). Следующие значения свойства display делают элемент
встроенный уровень: inline, inline-table и inline-block. Элементы встроенного уровня генерируют  встроенного уровня
боксы , которые представляют собой боксы, участвующие во встроенном
контекст форматирования.
 Линейный  box  является одновременно встроенным и чей
содержимое участвует в содержащем его встроенном контексте форматирования. А
незамещенный элемент со значением 'display', равным 'inline', генерирует
встроенный ящик.
Блоки встроенного уровня, которые не являются встроенными блоками (например, замененные
элементы встроенного уровня, элементы встроенного блока и встроенные таблицы
элементы) называются  атомарными блоками строкового уровня , потому что
они участвуют в своем встроенном контексте форматирования как один непрозрачный
коробка.
 9.2.2.1 Анонимные встроенные блоки 
 Любой текст, который непосредственно содержится внутри элемента контейнера блока (не
внутри встроенного элемента) должен рассматриваться как анонимный встроенный
элемент.
 В документе с такой разметкой HTML:
 
 Некоторый  выделенный  текст 
  
 
  генерирует блок-бокс с несколькими встроенными блоками внутри
Это. Поле для «подчеркнутого» - это встроенный блок, созданный встроенным
элемент (  ), но другие блоки («Некоторые» и «текст») являются встроенными блоками, генерируемыми элементом уровня блока (
 ).Последние называются анонимными встроенными
боксы, потому что они не имеют связанного элемента встроенного уровня.
 Такие анонимные встроенные блоки наследуют наследуемые свойства от
их родительский блок блока. Неунаследованные свойства имеют начальные
значение. В этом примере цвет анонимных встроенных полей:
унаследован от P, но фон прозрачный.
 Содержимое пустого пространства, которое впоследствии будет свернуто в соответствии со свойством 'white-space', не создает никаких анонимных встроенных блоков.
 Если из контекста ясно, какой тип анонимного ящика
означает, что как анонимные встроенные блоки, так и анонимные блоки блоков
в этой спецификации просто называются анонимными блоками.
 Есть еще типы анонимных ящиков, которые возникают при форматировании
таблицы.
 9.2.3 Боксы для обкатки 
 [Этот раздел существует таким образом, что номера разделов такие же, как в
предыдущие черновики. 'Отображать:
run-in 'теперь определен в CSS уровня 3 (см. базовую блочную модель CSS).]
 9.2.4 Свойство display 
  'дисплей' 
  Значение:  встроенный | блок | элемент списка | встроенный блок |
стол | встроенный стол | таблица-строка-группа | таблица-заголовок-группа |
стол-нижний колонтитул | стол-ряд | таблица-столбец-группа | таблица-столбец |
таблица-ячейка | заголовок таблицы | нет | наследовать
  Начальный:  встроенный
  Применимо к:  всем элементам
  Унаследовано:  нет
  В процентах:  Н / Д
  Медиа:  все
  Расчетное значение:  см. Текст
 Значения этого свойства имеют следующие значения:
  блок 
 Это значение заставляет элемент создавать блок-бокс.
  рядный блок 
 Это значение заставляет элемент генерировать блок встроенного уровня
контейнер.
Внутренняя часть встроенного блока форматируется как блок-блок, а
сам элемент отформатирован как атомарный блок встроенного уровня.
  рядный 
 Это значение заставляет элемент создавать один или несколько встроенных блоков.
  элемент списка 
 Это значение заставляет элемент (например, LI в HTML) генерировать
блок основного блока и блок маркера.Для получения информации о
списки и примеры форматирования списков см. в разделе
списки.
  нет 
 Это
value приводит к тому, что элемент не отображается в структуре форматирования (т. е.
в визуальных средах элемент не создает рамок и не влияет на
макет). Дочерние элементы также не создают ящиков; в
элемент и его содержимое удаляются из структуры форматирования
полностью. Это поведение  не может быть отменено  установка свойства 'display'
по потомкам. Обратите внимание, что отображение «none» не создает невидимого
коробка; он вообще не создает коробки. CSS включает механизмы, которые позволяют
элемент для создания блоков в структуре форматирования, влияющих на
форматирование но сами не видны. Пожалуйста, обратитесь к разделу
на видимости для подробностей.
 Таблица,
встроенный стол,
таблица-строка-группа,
таблица-столбец,
таблица-столбец-группа,
,
,
стол-ряд,
таблица-ячейка и
заголовок таблицы
 Эти значения заставляют элемент вести себя как элемент таблицы
(с учетом ограничений, описанных в главе о таблицах).
 Вычисленное значение совпадает с указанным значением, за исключением
позиционированные и плавающие элементы (см. Взаимосвязь между 'display', 'position' и
'float') и для корневого элемента. Для корневого элемента вычисленное значение изменяется, как описано в
раздел о взаимосвязях между 'display', 'position' и 'float'.
 Обратите внимание, что хотя начальная
значение 'display' равно
'inline', правила в таблице стилей по умолчанию пользовательского агента могут переопределить это значение.См. Образец таблицы стилей для HTML 4 в
приложение.
 Примеры:
 Вот несколько примеров свойства display:
 
p {display: block}
em {display: inline}
li {display: list-item}
img {display: none} / * Не отображать изображения * /
  
 В CSS 2.1 блок может быть размещен в соответствии с тремя позициями  схемы: 
 Нормальный расход. В CSS 2.1 нормально
поток включает форматирование блока
блочных боксов,
встроенное форматирование
боксов на строчном уровне и относительное позиционирование
блоки на уровне блоков и на строчном уровне.
 Поплавки. В поплавковой модели
ящик сначала выкладывается по нормальному потоку, потом
вынут из потока и сдвинут
как можно дальше влево или вправо. Контент может
течь вдоль поплавка.
 Абсолютное позиционирование.
В модели абсолютного позиционирования блок удаляется из
нормальный поток полностью (это не влияет на более поздних братьев и сестер)
и присвоил позицию относительно содержащего блока.
 Элемент называется  из
поток , если он плавающий, абсолютно позиционированный или
корневой элемент.Элемент называется  в потоке , если он не выходит из потока. В  расход элемента   A  - это комплект, состоящий из  A  и всех впускных
элементы, ближайший предок которых вне потока -  A .
   Примечание.  Схемы позиционирования CSS 2.1 помогают авторам создавать свои документы.
более доступным, позволяя им избегать уловок с разметкой
(например, невидимые изображения), используемые для эффектов макета. 
 9.3.1 Выбор схемы позиционирования: свойство 'position' 
 Свойства 'position' и 'float' определяют, какие
CSS 2.1 алгоритм позиционирования используется для расчета
положение коробки.
  'позиция' 
  Значение:  статическое | родственник | абсолютный | фиксированный | наследовать
  Начальное:  статическое
  Применимо к:  всем элементам
  Унаследовано:  нет
  В процентах:  Н / Д
  Медиа:  визуальный
  Расчетное значение: , как указано
 Значения этого свойства имеют следующие значения:
  статический 
 Коробка нормальная коробка, выложенная по нормальному потоку.В
'вершина',
'верно',
'Нижний',
и влево'
свойства не применяются.
  родственник 
 Положение ящика рассчитывается в соответствии с нормальным потоком (это называется положением в
нормальный расход). Затем коробка смещается относительно своего нормального положения. Когда
блок B расположен относительно, положение следующего блока
рассчитывается так, как если бы B не был компенсирован. Влияние 'position: relative' на элементы table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell и table-caption. не определено.
  абсолютное 
 Указано положение коробки (и, возможно, размер)
с "верхом",
'верно',
"дно" и
'оставил'
характеристики.
Эти свойства определяют смещения по отношению к боксу.
содержащий блок. Абсолютно
расположенные коробки выводятся из нормального потока. Это означает
они не влияют на расположение более поздних братьев и сестер. Также,
хотя абсолютно позиционируется
коробки имеют поля, они
не рухнуть
с любыми другими полями.
  фиксированный 
 Положение бокса рассчитывается по "абсолютному"
модель, но, кроме того, коробка закреплена относительно некоторой ссылки.Как и в случае с «абсолютной» моделью, поля блока не сжимаются с другими полями.
В случае портативных, проекционных, экранных, tty и телевизионных типов носителей:
бокс зафиксирован относительно области просмотра
и не двигается, когда
прокручивается. В случае типа носителя для печати поле отображается на каждой странице и фиксируется относительно поля страницы, даже если страница просматривается через область просмотра.
(например, в случае предварительного просмотра). Для других СМИ
типы, представление не определено.Авторы могут пожелать указать «исправлено» в
медиа-зависимый способ. Например, автор может пожелать, чтобы коробка оставалась
вверху области просмотра на экране, но
не вверху каждой распечатанной страницы. Две спецификации могут быть
разделены с помощью @media
правило, например: Пример (ы):
 
@media screen {
  h2 # first {position: fixed}
}
@media print {
  h2 # first {position: static}
}
  
 UA не должны разбивать содержимое фиксированных ящиков на страницы. Обратите внимание, что UA могут печатать невидимый контент в других
способами.См. "Контент за пределами
страничный бокс »в главе 13.
 Пользовательские агенты могут обрабатывать положение корневого элемента как «статическое».
 9.3.2 Смещения прямоугольника: «вверху», «вправо», «внизу», «влево» 
 Элемент считается  позиционированным  если его свойство 'position' имеет
значение, отличное от static. Позиционированные элементы генерируют
расположенные коробки, расположенные в соответствии с четырьмя свойствами:
  'верх' 
  Значение:  <длина> | <процент> | авто | наследовать
  Начальный:  авто
  Применимо к:  позиционируемым элементам
  Унаследовано:  нет
  Проценты:  относятся к высоте содержащего блока
  Медиа:  визуальный
  Вычисленное значение: , если
указанная как длина, соответствующая абсолютная длина; если
указанное в процентах указанное значение; в противном случае - «авто».
 Это свойство указывает, насколько далеко верхняя часть абсолютно позиционированного блока
край поля смещен ниже верхнего края содержащего блок блока. Для относительно
расположенные блоки, смещение относительно верхних краев
сам ящик (т.е. ящик получает позицию в нормальном потоке, затем
смещение от этой позиции в соответствии с этими свойствами).
  'правый' 
  Значение:  <длина> | <процент> | авто | наследовать
  Начальный:  авто
  Применимо к:  позиционируемым элементам
  Унаследовано:  нет
  Проценты:  относятся к ширине содержащего блока
  Медиа:  визуальный
  Вычисленное значение: , если
указанная как длина, соответствующая абсолютная длина; если
указанное в процентах указанное значение; иначе,
'авто'.
 Аналогично 'top', но указывает, насколько далеко находится правый край поля
смещение слева от правого края содержащего блока блока. Для относительно
расположенные блоки, смещение относительно правого края
сам ящик.
  низ 
  Значение:  <длина> | <процент> | авто | наследовать
  Начальный:  авто
  Применимо к:  позиционируемым элементам
  Унаследовано:  нет
  Проценты:  относятся к высоте содержащего блока
  Медиа:  визуальный
  Вычисленное значение: , если
указанная как длина, соответствующая абсолютная длина; если
указанное в процентах указанное значение; в противном случае - «авто».
 Аналогично 'top', но указывает, насколько далеко нижний край поля находится
смещение над нижней частью содержащего блока блока. Для относительно
расположенные блоки, смещение относительно нижнего края
сам ящик.
  'левый' 
  Значение:  <длина> | <процент> | авто | наследовать
  Начальный:  авто
  Применимо к:  позиционируемым элементам
  Унаследовано:  нет
  Проценты:  относятся к ширине содержащего блока
  Медиа:  визуальный
  Вычисленное значение: , если
указанная как длина, соответствующая абсолютная длина; если
указанное в процентах указанное значение; иначе,
'авто'.
 Аналогично 'top', но указывает, насколько далеко левый край поля находится
смещение вправо от левого края содержащего блока блока. Для относительно
расположенные блоки, смещение относительно левого края
сам ящик.
 Значения для четырех свойств имеют следующие значения:
  <длина> 
 Смещение - это фиксированное расстояние от опорной кромки. Допускаются отрицательные значения.
  <процент> 
 Смещение - это процент от ширины содержащего блока (для «левого» или «правого») или высоты (для «верха» и «низа»).Допускаются отрицательные значения.
  авто 
 Для незамещенных элементов влияние этого значения
зависит от того, какое из связанных свойств имеет значение "авто" как
хорошо. См. Разделы на
ширина
и высота
абсолютно позиционированных,
незаменимые элементы для подробностей. Для замененных элементов
влияние этого значения зависит только от внутренних размеров
замененный контент. Смотрите разделы по ширине и высоте абсолютно
позиционировал, заменял элементы на детали.
 Блоки в нормальном потоке принадлежат контексту форматирования, который может быть
блочный или встроенный, но не оба одновременно. Блоки уровня блока участвуют в контексте форматирования блока. Блоки встроенного уровня участвуют во встроенном контексте форматирования.
 9.4.1 Контексты форматирования блоков 
 Плавающие, абсолютно позиционированные элементы, блочные контейнеры (например,
inline-block, table-cells и table-captions), которые не являются блочными
боксы и блоки с "переполнением", отличным от "видимого"
(кроме случаев, когда это значение было распространено на область просмотра) установить
новые контексты форматирования блоков для их содержимого.
 В контексте форматирования блока блоки располагаются один после
другой, вертикально, начиная с верхней части содержащего блока. В
расстояние по вертикали между двумя соседними полями определяется свойствами поля. Вертикальные поля
между соседними блоками уровня блока в схлопывании контекста форматирования блока.
 В контексте форматирования блока левый внешний край каждого блока касается
левый край содержащего блока (для форматирования справа налево, справа
края касаются). Это верно даже при наличии поплавков (хотя
box  line box  может сжиматься из-за поплавков), если только box
устанавливает новый контекст форматирования блока (в этом случае сам блок  может  стать уже из-за
поплавки).
 Для получения информации о разрывах страниц в страничных носителях, пожалуйста, обратитесь к
раздел о разрешенных
разрывы страниц.
 9.4.2 Контексты встроенного форматирования 
 В контексте встроенного форматирования блоки располагаются горизонтально,
один за другим, начиная с вершины содержащего
блокировать. Горизонтальные поля, границы и отступы соблюдаются между
эти коробки. Ящики могут быть выровнены по вертикали по-разному: их
низ или верх могут быть выровнены, или базовые линии текста внутри них
могут быть выровнены.Прямоугольная область, содержащая блоки, образующие
строка называется строкой , строка .
 Ширина линейного бокса определяется содержащим блоком и наличием поплавков.
Высота строки
box определяется правилами, приведенными в разделе о расчете высоты строки.
 Строка всегда достаточно высока для всех содержащихся в ней коробок.
Однако он может быть выше самого высокого содержащегося в нем ящика.
(если, например, прямоугольники выровнены так, что базовые линии совпадают).Когда высота бокса B меньше, чем высота строчного бокса, содержащего его,
вертикальное выравнивание B внутри линейного блока определяется
свойство 'vertical-align'.
Когда несколько боксов встроенного уровня не могут уместиться по горизонтали в пределах одного
линейного блока, они распределяются между двумя или более вертикально сложенными
строчные коробки. Таким образом, абзац представляет собой вертикальную стопку строковых блоков. Линия
коробки укладываются друг на друга без вертикального разделения (кроме указанных
в другом месте), и они никогда не пересекаются.
 Как правило, левый край линейного прямоугольника касается левого края
содержащего его блока, и правый край касается правого края
его содержащий блок.Однако плавающие ящики могут оказаться между
содержащий край блока и край линейного блока. Таким образом, хотя строка
поля в одном и том же встроенном контексте форматирования обычно имеют одинаковые
ширины (содержащей блок), они могут различаться по ширине, если
доступное горизонтальное пространство уменьшается из-за поплавков. Строчные поля с одинаковым встроенным форматированием
контекст обычно различается по высоте (например, одна строка может содержать высокий
изображение, а остальные содержат только текст).
 Когда общая ширина боксов встроенного уровня на линии меньше, чем
ширина линейного бокса, содержащего их, их горизонтальное распределение
внутри строчного поля определяется свойством text-align.Если это
свойство имеет значение justify, пользовательский агент может растягивать пробелы
и слова в строковых блоках (но не строчные таблицы и строковые блоки
коробки).
 Когда встроенный блок превышает ширину линейного блока, он разделяется на несколько блоков, и эти блоки распределяются по нескольким строчным блокам. Если встроенный блок не может быть разделен (например, если встроенный блок содержит один символ или правила разбиения слов на конкретном языке запрещают разрыв внутри встроенного блока, либо если на встроенный блок влияет значение пробела nowrap или pre ), то встроенный блок переполняет строчный блок.
 Когда встроенный блок разделен, поля,
границы и отступы не имеют визуального эффекта там, где происходит разделение (или
при любом расколе, когда их несколько).
 Встроенные блоки также могут быть разделены на несколько блоков  внутри
та же строка  из-за двунаправленного текста
обработка.
 Строки создаются по мере необходимости для удержания
содержимое на уровне строки во внутреннем контексте форматирования. Линейные боксы
которые не содержат текста, без сохраненных пробелов, без встроенных
элементы с ненулевыми полями, отступами или границами, и никакое другое текущее содержимое (например, изображения, встроенные
блоки или встроенные таблицы) и не должны заканчиваться сохраненной новой строкой.
рассматриваться как линейные блоки нулевой высоты для целей определения
позиции любых элементов внутри них и должны рассматриваться как
не существует ни для каких других целей.
 Вот пример конструкции встроенного блока. Следующий абзац
(создается элементом уровня блока HTML P) содержит анонимный текст
с вкраплениями EM и STRONG:
 
 Появляется несколько  выделенных слов 
 в этом  предложении, дорогой. 
  
 Элемент P генерирует блок-бокс, содержащий пять встроенных
ящиков, три из которых анонимные:
 Аноним: "Несколько"
 EM: «подчеркнутые слова»
 Аноним: "появляются"
 СИЛЬНЫЙ: "в этом"
 Аноним: "приговор, дорогой.«
 Чтобы отформатировать абзац, пользовательский агент помещает пять полей в
строчные коробки. В этом примере поле, созданное для элемента P
устанавливает содержащий блок для строковых боксов. Если содержащий
блок достаточно широк, все встроенные боксы поместятся в
однострочный блок:
 Несколько  подчеркнутых слов  появляются  в этом предложении , дорогая.
 
 Если нет, встроенные блоки будут разделены и распределены по
несколько строчных боксов.Предыдущий абзац можно разбить следующим образом:
Появляется несколько  подчеркнутых слова 
  в этом предложении , дорогая.
 
или вот так:Несколько  подчеркнули 
  слова  появляются  в этом 
приговор, дорогой.
 
 В предыдущем примере блок EM был разделен на два блока EM.
(назовите их «split1» и «split2»). Поля, границы,
отступы или текстовые украшения не имеют видимого эффекта после split1 или
перед split2.
 Рассмотрим следующий пример:
 


  <ГОЛОВА>
     Пример встроенного потока на нескольких строках 
    <СТИЛЬ type = "text / css">
      EM {
        отступ: 2 пикселя;
        маржа: 1em;
        ширина границы: средний;
        стиль границы: пунктирная;
        высота строки: 2.4em;
      }
    
  
  <ТЕЛО>
     Здесь появляется несколько  выделенных слов . 
  

  
 В зависимости от ширины P коробки могут быть распределены как
следует:
 Поле вставляется перед словами «подчеркнуто» и после «слов».
 Обивка вставляется перед, сверху и снизу
«подчеркнутый» и после, над и под «словами». А
Пунктирная граница отображается с трех сторон в каждом случае.
 9.4.3 Относительное позиционирование 
 После того, как блок был выложен в соответствии с нормальным потоком или перемещен, его можно сдвинуть относительно
эта позиция. Это называется относительным позиционированием  . Смещение коробки
(B1) таким образом не влияет на следующий блок (B2): B2 - это
задано положение, как если бы B1 не был смещен, а B2 не перемещен
после применения смещения B1.Это означает, что относительное позиционирование
может привести к наложению ящиков.
Однако, если относительное позиционирование вызывает переполнение: авто или
поле "переполнение: прокрутка", чтобы иметь
переполнение, UA должен разрешить пользователю доступ к этому контенту (по его смещению
position), которые, создавая полосы прокрутки, могут повлиять на макет.
 Относительно расположенная коробка сохраняет нормальный размер потока, включая
разрывы строк и место, изначально зарезервированное для них. Раздел о
содержащий блоки объясняет, когда
относительно позиционированный блок устанавливает новый содержащий блок.
 Для относительно расположенных элементов, «влево» и «вправо» перемещают
коробки по горизонтали, не меняя их размера. «Влево» перемещает
прямоугольники вправо, а «right» перемещает их влево. Поскольку коробки
не расщепляются и не растягиваются в результате "левого" или "правого"
всегда используются следующие значения: left = -right.
 Если и 'left', и 'right' имеют значение 'auto' (их начальные значения),
используемые значения - "0" (т. е. поля остаются в исходном положении.
должность).
 Если 'left' - 'auto', его используемое значение - минус значение 'right'.
(я.е., квадраты перемещаются влево на значение «вправо»).
 Если 'right' задано как 'auto', его используемое значение минус
значение «влево».
 Если ни «влево», ни «вправо» не являются «авто», положение
чрезмерно ограничены, и одно из них следует игнорировать. Если свойство 'direction' содержащего блока - 'ltr', значение 'left' побеждает, а значение 'right'
становится "левым". Если 'direction' содержащего блока 'rtl', 'right' побеждает, а 'left' игнорируется.
 Примеры:
  Пример. Следующие три правила эквивалентны:
 
div.a8 {положение: относительное; направление: ltr; слева: -1em; right: auto}
div.a8 {положение: относительное; направление: ltr; слева: авто; справа: 1em}
div.a8 {положение: относительное; направление: ltr; слева: -1em; справа: 5em}
  
 Свойства 'top' и 'bottom' перемещаются относительно друг друга.
элемент (ы) вверх или вниз без изменения их размера. «Вверх» перемещает
ящики вниз, а «дно» перемещает их вверх. Поскольку коробки
не расщепляются и не растягиваются в результате «верха» или «низа»,
всегда используются следующие значения: верх =-низ.Если оба являются «автоматическими», их используемые значения равны «0». Если один из них
«авто» становится отрицательным по отношению к другому. Если ни один из них не является «авто»,
'дно' игнорируется (т. е. используемое значение 'дно' будет
минус значение 'top').
 Примечание.
Динамическое движение относительно расположенных ящиков может производить
эффекты анимации в средах сценариев (см. также свойство «видимость»).
Хотя относительное позиционирование может использоваться как форма надстрочного индекса и
индексирования, высота строки не регулируется автоматически, чтобы принять
позиционирование во внимание.См. Описание расчета высоты строки для получения дополнительной информации.
Информация.
 Примеры относительного позиционирования представлены в разделе сравнения нормального расхода, поплавков и абсолютного
позиционирование.
 Поплавок - это прямоугольник, который смещается влево или вправо на
текущая строка. Самая интересная характеристика поплавка (или
"плавающий" или "плавающий" блок) означает, что содержимое может течь вдоль его стороны
(или иметь запрет на это свойство 'clear'). Контент течет вниз
правая сторона плавающего влево блока и вниз по левой стороне
коробка с правым верхом.Ниже приводится введение в float.
позиционирование и поток контента; точные правила, регулирующие поведение поплавка, приведены в
описание "поплавка"
имущество.
 Плавающий ящик
сдвигается влево или вправо, пока его внешний край не коснется
содержащий край блока или внешний край другого поплавка.
Если есть линейный прямоугольник, внешний верх плавающего прямоугольника выровнен с
верхняя часть поля текущей строки.
 Если горизонтального места недостаточно для
поплавок, он смещается вниз до тех пор, пока не сядет или не останется
присутствует больше поплавков.
 Так как поплавок не находится в потоке, непозиционированные блоки блоков
созданный до и после плавающего бокса, перемещается вертикально, как если бы поплавок
не существует. Тем не мение,
текущий и последующие
строковые блоки, созданные рядом с поплавком,
укороченный
как нужно
чтобы освободить место для поля поля поплавка.
 Линейный прямоугольник рядом с поплавком, когда существует вертикальное положение
который удовлетворяет всем этим четырем условиям: (а) наверху или ниже
строки, (b) в нижней части или выше нижней части линейного поля, (c) ниже
край верхнего поля поплавка и (г) над краем нижнего поля
поплавка.
 Примечание: это означает, что поплавки с нулевой внешней высотой или
отрицательная внешняя высота не укорачивает строчные боксы.
 Если поле сокращенной строки слишком мало, чтобы содержать какое-либо содержимое, тогда
линейный прямоугольник сдвигается вниз (и его ширина пересчитывается) до тех пор, пока
либо какой-то контент подходит, либо поплавков больше нет.
Любое содержимое в текущей строке перед переформатированием плавающего блока
в той же строке с другой стороны поплавка.
Другими словами, если блоки встроенного уровня размещаются
в строке перед обнаружением левого поплавка, который помещается в оставшееся пространство строчного поля,
левый поплавок помещается в эту строку, выровненный по верхнему краю линейного бокса, а затем боксы встроенного уровня, уже находящиеся в строке, перемещаются соответственно вправо от поплавка (правая сторона является другой стороной левого поплавка) и наоборот для rtl и right float.
 Граница таблицы, заменяемый элемент на уровне блока или элемент в нормальном потоке, который устанавливает новый контекст форматирования блока.
(например, элемент с «переполнением», отличным от «видимого»)
не должен перекрывать поле полей любых поплавков в одном блоке
контекст форматирования как
сам элемент. При необходимости реализации должны очистить
указанный элемент, поместив его под любыми предыдущими поплавками, но может разместить
он примыкает к таким поплавкам, если есть достаточно места.
Они могут даже сделать рамку указанного элемента уже, чем
определено разделом 10.3.3.
CSS2 не определяет, когда UA может поместить указанный элемент рядом с поплавком.
или насколько этот элемент может стать уже.
 Примеры:
  Пример.  В следующем фрагменте документа содержащий слишком узкий блок
чтобы содержать содержимое рядом с поплавком,
поэтому контент перемещается ниже поплавков
где он выравнивается в строчном поле в соответствии с выравниванием текста
имущество.
 
p {ширина: 10em; бордюр: сплошной цвет морской волны; }
span {float: left; ширина: 5em; высота: 5em; граница: сплошной синий; }
 

...

 

   
  Суперкалифрагилистический

  
 Этот фрагмент может выглядеть так:
 Несколько поплавков могут находиться рядом, и эта модель также применима к
соседние поплавки в одной строке.
 Примеры:
 Следующее правило размещает все поля IMG с  class = "icon"  слева (и
устанавливает левое поле на «0»):
 
img.icon {
  плыть налево;
  маржа слева: 0;
}
  
 Рассмотрим следующий источник HTML и таблицу стилей:
 


  <ГОЛОВА>
     Пример с плавающей точкой 
    <СТИЛЬ type = "text / css">
      IMG {float: left}
      BODY, P, IMG {margin: 2em}
    
  
  <ТЕЛО>
     
       Какой-то образец текста, у которого нет другого ...
  

  
 Поле IMG перемещается влево. Следующее содержание
форматируется справа от поплавка, начиная с той же строки, что и
плавать.Линейные боксы справа от поплавка укорачиваются из-за
присутствия поплавка, но сохраняют свою "нормальную" ширину (ширину
содержащий блок, установленный элементом P) после поплавка. Этот
документ может быть отформатирован как:
 Форматирование было бы точно таким же, если бы документ
был:
 
<ТЕЛО>
   Пример текста
  
           нет другого ...

  
, потому что содержимое слева от поплавка смещено
поплавок и оплавил его правую сторону.
 Как указано в разделе 8.3.1,
поля плавающих боксов никогда не сжимаются с полями
соседние ящики. Таким образом, в предыдущем примере вертикальные поля не
свернуть между блоком P
и всплывающее окно IMG.
 Содержимое поплавков складывается так, как если бы поплавки генерировали новые
контексты наложения, за исключением того, что любые позиционированные элементы и элементы
которые на самом деле создают новые
Контексты стекирования принимают участие в родительском контексте стекирования поплавка.
Поплавок может перекрывать другие коробки в нормальном потоке (например,г., когда
коробка нормального потока рядом с поплавком имеет отрицательные поля). Когда это
происходит, поплавки отображаются перед непозиционированными в потоке
блоков, но за встроенными линиями.
 Примеры:
 Вот еще одна иллюстрация, показывающая, что происходит, когда поплавок
перекрывает границы элементов в нормальном потоке.
 [D]
 Плавающее изображение закрывает границы
блок-боксов он перекрывает.
 В следующем примере показано использование свойства clear для предотвращения содержимого
от течения рядом с поплавком.
 Примеры:
 Предполагая такое правило, как это:
 
p {clear: left}
  
Форматирование может выглядеть так:
 [D]
 В обоих параграфах установлено «clear: left», что
заставляет второй абзац "сдвигаться" в позицию ниже
поплавок - "зазор" добавляется над его верхним полем к
выполнить это (см. свойство «очистить»).
 9.5.1 Позиционирование поплавка:
'float' свойство 
  'поплавок' 
  Значение:  осталось | право | нет | наследовать
  Начальное:  нет
  Применимо к:  всем, кроме см. 9.7
  Унаследовано:  нет
  В процентах:  Н / Д
  Медиа:  визуальный
  Расчетное значение: , как указано
 Это свойство указывает, должен ли прямоугольник перемещаться влево,
верно, или нет. Он может быть установлен для любого элемента, но применяется только к
элементы, которые создают коробки, которые не
абсолютно позиционируется.Значения этого свойства имеют
следующие значения:
  слева 
 Элемент создает блок-бокс, который
поплыл влево. Контент располагается в правой части поля,
начиная сверху (с учетом свойства clear).
  правый 
 Аналогично «левому», за исключением того, что блок перемещается вправо, а содержимое перетекает в левую часть блока, начиная сверху.
  нет 
 Ящик не плавает.
 Пользовательские агенты могут рассматривать float как «none» в корневом элементе.
 Вот точные правила, которые
управлять поведением поплавков:
 Левый внешний край
Плавающий влево блок не может быть слева от левого края содержащего его блока. An
аналогичное правило справедливо для элементов, плавающих вправо.
 Если текущее поле плавающее влево, и есть какие-либо плавающие влево
блоки, созданные элементами ранее в исходном документе,
то для каждого такого более раннего блока должен быть либо левый внешний край текущего блока.
справа от правого внешнего края
более ранней коробки, или ее верх должен быть ниже низа
ранее коробка.Аналогичные правила справедливы для боксов, плавающих вправо.
 Правый внешний край
Плавающий влево прямоугольник не может быть справа от левого внешнего края любого плавающего вправо
коробка, которая находится рядом с ней. Аналогичные правила верны для
плавающие вправо элементы.
 Внешний верх плавающей коробки
не может быть выше вершины содержащего его блока.
Когда поплавок находится между двумя сворачивающимися полями,
float позиционируется, как если бы у него был пустой родительский анонимный блок, принимающий участие в
течение.Положение такого родителя определяется правилами в разделе о марже.
рушится.
 Внешний верх плавающего ящика
не может быть выше внешней вершины любого блока или плавающего бокса, созданного элементом
ранее в исходном документе.
 Внешний верх элемента
плавающий блок не может быть выше, чем верхняя часть любого линейного блока, содержащего блок
генерируется элементом ранее в исходном документе.
 Плавающий влево блок, слева от которого находится еще один плавающий влево блок.
не может иметь его правый внешний край справа от содержащего
правый край блока.(Неплотно: левый поплавок может не торчать на
правый край, если он уже не находится как можно дальше влево.)
аналогичное правило справедливо для элементов, плавающих вправо.
 Плавающий ящик должен быть размещен как можно выше.
 Плавающий влево прямоугольник нужно поставить как можно левее.
возможно, плавающий вправо прямоугольник как можно дальше вправо. А
более высокое положение предпочтительнее, чем положение, расположенное дальше
лево право.
 Но в CSS 2.1, если в контексте форматирования блока
представляет собой отрицательный вертикальный запас в потоке, так что положение поплавка
выше положения, которое было бы при всех таких отрицательных маржах
установлен в ноль, положение поплавка не определено.
 Ссылки на другие элементы в этих правилах относятся только к другим элементам в том же контексте форматирования блока, что и float.
 Примеры:
 Этот фрагмент HTML приводит к перемещению символа b вправо.
 ab 
 
 Если ширина элемента P достаточна, то a и b будут рядом.
боковая сторона. Это могло бы выглядеть так:
 9.5.2 Управление потоком рядом с поплавками:
«чистое» свойство 
  'прозрачный' 
  Значение:  нет | слева | право | оба | наследовать
  Начальное:  нет
  Применимо к:  блочным элементам
  Унаследовано:  нет
  В процентах:  Н / Д
  Медиа:  визуальный
  Расчетное значение: , как указано
 Это свойство указывает, какие стороны блока (ов) элемента могут , а не , должен быть рядом с более ранним плавающим блоком."Ясный"
свойство не учитывает числа с плавающей запятой внутри самого элемента или в
другое форматирование блока
контексты.
 Значения имеют следующие значения применительно к неплавающим
блочные ящики:
  левый 
 Требует, чтобы верхняя граница поля находилась ниже нижней
внешний край любых плавающих влево блоков, которые возникли из элементов
ранее в исходном документе.
  правый 
 Требует, чтобы верхняя граница поля находилась ниже нижней
внешний край любых плавающих вправо прямоугольников, образованных элементами
ранее в исходном документе.
  оба 
 Требует, чтобы верхняя граница поля находилась ниже нижней
внешний край любых плавающих вправо и влево блоков, которые привели к
из элементов ранее в исходном документе.
  нет 
 Нет ограничений на положение бокса относительно поплавков.
 Значения, отличные от «нет», потенциально вводят зазор .  Зазор препятствует обрушению маржи
и действует как интервал над верхним краем элемента.Он используется для
протолкните элемент вертикально мимо поплавка.
 Вычисление зазора элемента, для которого установлено значение «clear»,
выполняется путем определения гипотетического положения элемента
верхний край границы. Эта позиция
где был бы фактический верхний край границы, если бы элемент
«чистое» свойство было «нет».
 Если это гипотетическое положение верхней границы элемента
не пройдя соответствующие поплавки, тогда вводится зазор, и
поля схлопываются согласно правилам в 8.3.1.
 Затем устанавливается больший зазор из:
 Величина, необходимая для четного размещения граничного края блока
с нижним внешним краем самого нижнего поплавка, который должен быть
очищено.
 Величина, необходимая для размещения верхнего края границы блока
в его гипотетическом положении.
 В качестве альтернативы зазор устанавливается точно на величину, необходимую для
поместите границу блока даже с нижним внешним краем
самый низкий поплавок, который должен быть очищен.
   Примечание:  Оба поведения разрешены
ожидает оценки их совместимости с существующим веб-контентом. А
будущая спецификация CSS потребует либо того, либо другого. 
 Примечание: зазор может быть отрицательным или нулевым.
 Примеры:
 Пример 1. Предположим (для простоты), что у нас есть только
три поля в следующем порядке: блок B1 с нижним полем M1 (B1
не имеет дочерних элементов, отступов или границ), плавающий блок F с
высота H и блок B2 с верхним полем M2 (без отступов или границ,
нет детей).B2 имеет "clear" установлен на "both". Мы также предполагаем, что B2 не
пустой.
 Без учета свойства «чистота» на B2, мы имеем ситуацию в
диаграмму ниже. Границы B1 и B2 рушатся. Скажем,
нижняя граница B1 находится в точке y = 0, затем верхняя граница F находится в точке y = M1,
верхняя граница B2 находится в точке y = max (M1, M2), а нижняя граница F -
при y = M1 + H.
 Мы также предполагаем, что B2 не ниже F, т. Е. Мы находимся в
ситуация, описанная в спецификации, где нам нужно добавить зазор.Что
средства:
 макс. (M1, M2) 
 Нам нужно вычислить зазор C дважды, C1 и C2, и
оставьте большее из двух: C = max (C1, C2). Первый способ - поставить
верх B2 на одном уровне с низом F, то есть в точке y = M1 + H.
означает, что поля больше не сжимаются с зазором между
их:
 низ F = верхний край границы B2 B2
 M1 + H = M1 + C1 + M2 ⇔
 C1 = M1 + H - M1 - M2
 = H - M2
 Второе вычисление состоит в том, чтобы сохранить верхнюю часть B2 там, где она есть, т.е.е., в у
= макс (M1, M2). Это означает:
 макс. (M1, M2) = M1 + C2 + M2 ⇔
 C2 = макс (M1, M2) - M1 - M2
 Мы предположили, что max (M1, M2) 
 C2 = макс (M1, M2) - M1 - M2 
 C2 
 А так как C1 = H - M2, то
 C2 
 и, следовательно,
 C = макс (C1, C2) = C1
 Пример (ы):
 Пример 2.Примером отрицательного разрешения является эта ситуация в
который
зазор -1em. (Предположим, что ни один из элементов не имеет границ или
обивка):

  Первый параграф.


  Плавающий абзац.


  Последний абзац.
 
 Пояснение: Без "ясно", первый и последний абзацы "
поля исчезнут, а верхний край границы последнего абзаца будет
быть на одном уровне с верхом плавающего абзаца. Но "ясно"
требует, чтобы верхняя граница была на  ниже  поплавка, т.е.е., 2em
ниже. Это означает, что необходимо ввести зазор. Соответственно,
поля больше не сжимаются, а размер зазора устанавливается таким образом, чтобы
зазор + верхний край = 2em, то есть зазор = 2em - верхний край = 2em
- 3em = -1em.
 Когда свойство установлено для плавающих элементов, это приводит к
изменение правил для
позиционирование поплавка. Добавлено дополнительное ограничение (# 10):
 Верхний внешний край
поплавка должно быть ниже нижнего внешнего
край всех ранее плавающих влево прямоугольников (в случае 'clear:
left ') или все предыдущие блоки, плавающие вправо (в случае' clear:
правильно ') или оба (' ясно: оба ').
   Примечание.  Это свойство применяется ко всем элементам в CSS1. Реализации
таким образом, возможно, поддерживал это свойство для всех элементов. В CSS2
и CSS 2.1 свойство clear применяется только к элементам уровня блока.
Поэтому авторам следует использовать это свойство только на уровне блоков.
элементы. Если реализация поддерживает clear встроенных элементов,
вместо того, чтобы устанавливать зазор, как описано выше,
реализация должна вызвать разрыв и эффективно вставить одно или несколько пустых строковых блоков (или сдвинуть новое строковое поле вниз, как описано в разделе 9.5), чтобы переместить верхнюю часть очищенного строчного блока встроенной строки ниже соответствующего плавающего блока (ов). 
 В модели абсолютного позиционирования прямоугольник явно смещен с
относительно содержащего его блока. Удаляется из нормального потока
полностью (это не влияет на более поздних братьев и сестер). Абсолютно
позиционированный блок устанавливает новый содержащий блок для нормального потока
дети и абсолютно (но не фиксированные) позиционированные потомки. Однако содержание
абсолютно позиционированный элемент не обтекает другие блоки.Они
могут скрывать содержимое другого ящика (или сами скрывать),
в зависимости от
укладывать уровни перекрывающихся боксов.
 Ссылки в данной спецификации на  абсолютно позиционирован
элемент  (или его поле) подразумевает, что свойство 'position' элемента имеет значение
«абсолютный» или «фиксированный».
 9.6.1 Фиксированное позиционирование 
 Фиксированное позиционирование - это подкатегория абсолютного позиционирования. В
единственное отличие состоит в том, что для фиксированного блока, содержащий
блок устанавливается окном просмотра.Для непрерывных носителей фиксированный
коробки не перемещаются при прокрутке документа. В этом отношении они
похожи на фиксированные
фоновые изображения. Для страничных медиа, ящики
с фиксированными позициями повторяются на каждой странице. Это полезно для
размещение, например, подписи внизу каждой страницы.
Боксы с фиксированным положением, превышающие площадь страницы
обрезанный. Части блока фиксированного положения, которые не видны в
исходный содержащий блок не будет печататься.
 Авторы могут использовать фиксированное позиционирование для создания презентаций в виде фреймов.Рассмотрим следующую компоновку рамы:
 Этого можно достичь с помощью следующего HTML-документа и
правила стиля:
 


  <ГОЛОВА>
     Рамочный документ с CSS 2.1 
    <СТИЛЬ type = "text / css" media = "screen">
      BODY {height: 8.5in} / * Требуется для роста в процентах ниже * /
      #header {
        положение: фиксированное;
        ширина: 100%;
        высота: 15%;
        верх: 0;
        справа: 0;
        внизу: авто;
        слева: 0;
      }
      #sidebar {
        положение: фиксированное;
        ширина: 10em;
        высота: авто;
        верх: 15%;
        справа: авто;
        внизу: 100 пикселей;
        слева: 0;
      }
      #основной {
        положение: фиксированное;
        ширина: авто;
        высота: авто;
        верх: 15%;
        справа: 0;
        внизу: 100 пикселей;
        слева: 10em;
      }
      #footer {
        положение: фиксированное;
        ширина: 100%;
        высота: 100 пикселей;
        верх: авто;
        справа: 0;
        внизу: 0;
        слева: 0;
      }
    
  
  <ТЕЛО>
    ... 
     ... 
     ... 
     ... 
  

  
 Три свойства, которые влияют на создание и компоновку блока:
'отображать',
'позиция' и
'float' - взаимодействовать следующим образом:
 Если 'display'
имеет значение 'none', тогда
'позиция' и
'float' не применяются.
В этом случае элемент не создает бокса.
 В противном случае, если «позиция»
имеет значение 'absolute' или 'fixed', поле абсолютно позиционировано,
вычисленный
значение float равно none,
и отображение настраивается в соответствии с таблицей ниже.Положение поля будет определяться свойствами «сверху», «справа», «снизу» и «слева», а также свойствами поля.
содержащий блок.
 В противном случае, если 'float' имеет значение, отличное от 'none', поле
с плавающей точкой и "отображение" устанавливается в соответствии с приведенной ниже таблицей.
 В противном случае, если элемент является корневым элементом,
'display' устанавливается в соответствии с таблицей ниже, за исключением того, что это
undefined в CSS 2.1, указывает ли указанное значение 'list-item'
становится вычисленным значением 'block' или 'list-item'.
 В противном случае применяются остальные значения свойства display.
как указано.
 Заданное значение  Вычисленное значение
 inline-table  table
 inline, table-row-group, table-column,
группа столбцов таблицы, группа заголовков таблицы, группа нижнего колонтитула таблицы, строка-таблицы,
table-cell, table-caption, inline-block  block
 другие  то же, что указано
 Чтобы проиллюстрировать различия между нормальным потоком, относительным
позиционирование, плавающее и абсолютное позиционирование, мы предлагаем ряд
примеры на основе следующего HTML:
 


  <ГОЛОВА>
     Сравнение схем позиционирования 
  
  <ТЕЛО>
     Начало содержимого тела.
       Начало внешнего содержимого.
       Внутреннее содержимое. 
      Конец внешнего содержимого. 
      Конец содержимого тела.
    
  

  
 В этом документе мы принимаем следующие правила:
 
тело {дисплей: блок; размер шрифта: 12 пикселей; высота строки: 200%;
       ширина: 400 пикселей; height: 400px}
p {display: block}
диапазон {display: inline}
  
 Конечные позиции ящиков, генерируемых внешним   и  внутренних  элементов различаются в каждом примере.На каждой иллюстрации
цифры слева от рисунка указывают нормальное положение потока двойного интервала (для
четкость) линий.
 Примечание. Диаграммы в этом разделе являются иллюстративными и не предназначены для
шкала. Они призваны подчеркнуть различия между
различные схемы позиционирования в CSS 2.1 и не предназначены для
справочные изображения приведенных примеров.
 9.8.1 Нормальный поток 
 Рассмотрим следующие объявления CSS для  внешних  и  внутренний , которые не изменяют нормальный
поток ящиков:
 
#outer {color: red}
#inner {цвет: синий}
  
 Элемент P содержит все встроенное содержимое: анонимный встроенный текст и два SPAN
элементы.Поэтому весь контент будет выложен
во встроенном контексте форматирования внутри содержащего блока
устанавливается элементом P, создавая что-то вроде:
 9.8.2 Относительное позиционирование 
 Чтобы увидеть эффект относительного
позиционирование, уточняем:
 
#outer {положение: относительное; верх: -12px; красный цвет }
#inner {позиция: относительная; верх: 12 пикселей; цвет синий }
  
 Текст обычно перемещается до внешнего элемента  . В  внешний текст  затем перетекает в нормальное положение и
размеры в конце строки 1.Затем встроенные поля, содержащие
текст (распределенный по трем строкам) смещается как единое целое на '-12px'
(снизу вверх).
 Содержимое  внутреннего , как дочернего элемента  внешнего , будет
обычно идут сразу после слов «внешнего содержимого» (в строке
1.5). Однако внутреннее содержимое   само смещено
относительно внешнего содержимого   на «12 пикселей» (вниз), назад к
их исходное положение в строке 2.
 Обратите внимание, что содержимое после  внешнего  не зависит от
относительное расположение  внешнего .
 Обратите внимание, что если бы смещение  внешнего  было '-24px',
текст  внешнего  и основной текст перекрывались бы.
 9.8.3 Плавающий блок 
 Теперь рассмотрим эффект плавающего блока.  внутренний текст элемента  справа с помощью следующих
правила:
 
#outer {color: red}
#inner {float: right; ширина: 130 пикселей; цвет синий }
  
 Текст нормально перетекает во внутреннее поле  , которое вытягивается
из потока и перемещается к правому краю (его «ширина» была назначена явно).Линии слева от поплавка укорачиваются, а
в них перетекает оставшийся текст документа.
 Чтобы показать эффект свойства 'clear', мы добавляем  родственного брата  элемент к примеру:
 


  <ГОЛОВА>
     Сравнение схем позиционирования II 
  
  <ТЕЛО>
     Начало содержимого тела.
       Начало внешнего содержимого. Внутреннее содержимое. 
       Одноуровневое содержимое. 
      Конец внешнего содержимого. 
      Конец содержимого тела.
    
  

  
 Следующие правила:
 
#inner {float: right; ширина: 130 пикселей; цвет синий }
#sibling {цвет: красный}
  
 заставляет внутреннюю коробку   плавать вправо, как и раньше, а
оставшийся текст документа помещается на освободившееся место:
 Однако, если «очистить»
для дочернего элемента   установлено значение 'right' (т.е.е.,
сгенерированный  родственный блок  не примет позицию рядом с
плавающие прямоугольники справа), содержимое , родственного брата , начинает
поток ниже поплавка:
 
#inner {float: right; ширина: 130 пикселей; цвет синий }
#sibling {ясно: правильно; красный цвет }
  
 9.8.4 Абсолютное позиционирование 
 Наконец, мы рассмотрим эффект абсолютного позиционирования.
Рассмотрим следующие объявления CSS для , внешнего  и  внутренний :
 
#outer {
    позиция: абсолютная;
    верх: 200 пикселей; слева: 200 пикселей;
    ширина: 200 пикселей;
    красный цвет;
}
#inner {цвет: синий}
  
, что приводит к размещению верхней части внешнего блока   с
относительно содержащего его блока.Содержащий блок для позиционированного
box устанавливается ближайшим предком (или, если его нет
существует, инициал, содержащий
блок, как в нашем примере). Верхняя сторона  внешней коробки  на 200 пикселей ниже верха содержащего блока, а левая сторона
«200 пикселей» слева. Дочерний бокс  внешний  обтекаемый
обычно по отношению к своему родителю.
 В следующем примере показан прямоугольник с абсолютным позиционированием, который
дочерний элемент относительно расположенного бокса.Хотя родитель
Внешний блок   фактически не смещен, для его свойства position установлено значение relative.
означает, что его поле может служить содержащим блоком для позиционированного
потомки. Поскольку внешний блок   является встроенным блоком,
разделить на несколько строк, верхний и левый края первого встроенного блока
(обозначено жирными пунктирными линиями на иллюстрации ниже)
служат в качестве ссылок для "топ" и
«левые» смещения.
 
#outer {
  положение: относительное;
  красный цвет
}
#внутренний {
  позиция: абсолютная;
  верх: 200 пикселей; слева: -100 пикселей;
  высота: 130 пикселей; ширина: 130 пикселей;
  цвет синий;
}
  
 Это приведет к примерно следующему:
 Если мы не разместим внешнюю коробку  :
 
#outer {color: red}
#внутренний {
  позиция: абсолютная;
  верх: 200 пикселей; слева: -100 пикселей;
  высота: 130 пикселей; ширина: 130 пикселей;
  цвет синий;
}
  
 содержащий блок для  внутренний  становится начальным содержащим блоком (в нашем
пример).На следующем рисунке показано, где  внутренний  box в этом случае закончится.
 Относительное и абсолютное позиционирование может использоваться для внесения изменений
баров, как показано в следующем примере. Следующий фрагмент:
 

Я использовал два красных дефиса в качестве панели изменений. Они
будет "плавать" слева от строки, содержащей ЭТО
 - 
слово. 
  
 может дать что-то вроде:
 Сначала абзац (стороны блока которого показаны в
иллюстрация) протекает нормально.Затем он смещается на 10 пикселей от
левый край содержащего блока (таким образом, правое поле 10 пикселей имеет
были зарезервированы в ожидании компенсации). Два дефиса действуют
поскольку полосы изменений вынимаются из потока и помещаются в текущую
строка (из-за 'top: auto'), '-1em' от левого края содержащего
блок (установлен буквой P в ее конечном положении). Результат
что полосы изменений "плавают" слева от текущего
линия.
 9.9.1 Указание уровня стека: свойство z-index 
  'z-index' 
  Значение:  авто | <целое число> | наследовать
  Начальный:  авто
  Применимо к:  позиционируемым элементам
  Унаследовано:  нет
  В процентах:  Н / Д
  Медиа:  визуальный
  Расчетное значение: , как указано
 Для позиционированного блока свойство z-index указывает:
 Уровень стека бокса в текущем контексте стека.
 Устанавливает ли блок контекст наложения.
 Значения имеют следующие значения:
  <целое число> 
 Это целое число - уровень стека сгенерированного блока в
текущий контекст наложения. Коробка также устанавливает новую укладку
контекст.
  авто 
 Уровень стека сгенерированного бокса в текущем стеке
context равен 0. Блок не устанавливает новый контекст наложения.
если это не корневой элемент.
  В этом разделе выражение «перед»
означает ближе к пользователю, когда пользователь смотрит на экран. 
 В CSS 2.1 у каждого блока есть позиция в трех измерениях. Кроме того
в горизонтальное и вертикальное положение, прямоугольники лежат вдоль "оси z"
и форматируются один над другим. Положения оси Z
особенно актуально, когда коробки визуально перекрываются. Эта секция
обсуждает, как блоки могут быть расположены вдоль оси z.
 Порядок рисования дерева рендеринга на холсте:
описаны в терминах контекстов наложения.Контексты стекирования могут
содержат дополнительные контексты наложения. Контекст стекирования является атомарным из
точка зрения его родительского контекста стекирования; коробки в других
контексты наложения не могут находиться между его блоками.
 Каждый блок принадлежит одному контексту стекирования  . Каждый установленный прямоугольник в
данный контекст наложения имеет целочисленный стек  уровень , который является его положением по оси Z относительно
другие уровни стека в том же контексте стекирования. Ящики с
большие уровни стека всегда форматируются
перед ящиками с более низкими уровнями стека.Ящики могут иметь отрицательные
уровни стека. Ящики с одинаковым уровнем стека в контексте стекирования
размещаются в порядке очереди в соответствии с древовидной структурой документов.
 Корневой элемент формирует корневой контекст стекирования. Другая укладка
контексты генерируются любым позиционированным элементом (включая
относительно позиционированные элементы) с вычисленным значением 'z-index'
кроме «авто». Контексты стекирования не обязательно связаны с
содержащие блоки. На будущих уровнях CSS другие свойства могут
ввести контексты наложения, например "непрозрачность"
[CSS3COLOR].
 В каждом контексте наложения следующие слои окрашиваются в
обратный порядок:
 фон и границы элемента, образующего укладку
контекст.
 дочерние контексты стека с отрицательными уровнями стека (большинство
сначала отрицательный).
 входящие, не встроенные, непозиционированные потомки.
 непозиционированные поплавки.
 входящие, встроенные, непозиционированные потомки, включая
встроенные таблицы и встроенные блоки.
 дочерние контексты стека с уровнем стека 0 и
позиционируют потомков с уровнем стека 0.
 дочерние контексты стека с положительными уровнями стека (минимум
положительный в первую очередь).
 Внутри каждого контекста стека позиционированные элементы с уровнем стека
0 (в слое 6), непозиционированные поплавки (слой 4), встроенные
блоки (уровень 5) и встроенные таблицы (уровень 5) окрашиваются
как если бы эти элементы сами генерировали новые контексты наложения,
за исключением того, что их предполагаемые потомки и любой потенциальный ребенок
контексты наложения принимают участие в текущем контексте наложения.
 Этот порядок покраски применяется рекурсивно к каждой укладке.
контекст. Это описание порядка отрисовки контекста наложения
представляет собой обзор подробного нормативного определения в
Приложение E.
 В следующем примере уровни стека
ящики (названные в соответствии с их атрибутами "id"):
«text2» = 0, «image» = 1, «text3» = 2 и «text1» = 3. В
Уровень стека «text2» наследуется от корневого блока. В
другие указываются свойством z-index.
 


  <ГОЛОВА>
     Расположение в Z-порядке 
    <СТИЛЬ type = "text / css">
      .куча {
        позиция: абсолютная;
        слева: 2 дюйма;
        верх: 2 дюйма;
        ширина: 3 дюйма;
        высота: 3 дюйма;
      }
    
  
  <ТЕЛО>
    
      

    

      Этот текст будет наложен на изображение бабочки.
    

    
      Этот текст будет ниже всего.

    
      Этот текст будет находиться под текстом text1, но наложить на него изображение бабочки.
    
  

  
 Этот пример демонстрирует понятие  прозрачность . По умолчанию фон позволяет видеть блоки позади него.
В этом примере каждый прямоугольник прозрачно перекрывает расположенные под ним поля. Этот
поведение можно изменить, используя один из существующих фоновые свойства.
 Соответствующие пользовательские агенты, которые
не поддерживает двунаправленный текст, может игнорировать свойства 'direction' и 'unicode-bidi'
описано в этом разделе.Это исключение включает UA, которые отображают
символы с письмом справа налево просто потому, что шрифт в системе их содержит
но не поддерживают концепцию направления текста справа налево.
 В некоторых сценариях символы пишутся справа налево.
оставил. В некоторых документах, в частности написанных арабским
или иврите, а в некоторых смешанных языковых контекстах текст в
одиночный (визуально отображаемый) блок может отображаться со смешанными
направленность. Это явление называется двунаправленностью  , или
для краткости "биди".
 Стандарт Unicode ([UNICODE], [UAX9]) определяет сложный
алгоритм определения правильной направленности текста. В
алгоритм состоит из неявной части, основанной на свойствах персонажа,
а также явные элементы управления для встраивания и переопределения. CSS 2.1 полагается
на этом алгоритме для достижения правильного двунаправленного рендеринга. Свойства direction и unicode-bidi позволяют
авторов, чтобы указать, как элементы и атрибуты документа
языковая карта для этого алгоритма.
 Пользовательские агенты, поддерживающие двунаправленный текст, должны применять Unicode.
двунаправленный алгоритм для каждой последовательности блоков встроенного уровня без прерывания
принудительным (биди
класс B) граница разрыва или блока.Эта последовательность образует
блок «абзац» в двунаправленном алгоритме. Встраивание абзаца
уровень устанавливается в соответствии со значением свойства 'direction' содержащего
блок, а не эвристика, указанная на шагах P2 и P3 Unicode
алгоритм.
 Поскольку направленность текста зависит от структуры и
семантика языка документа, эти свойства должны в большинстве
кейсы могут использоваться только разработчиками описаний типов документов (DTD),
или авторов специальных документов.Если в таблице стилей по умолчанию указано
эти свойства, авторы и пользователи не должны указывать правила для
переопределить их.
 Спецификация HTML 4 ([HTML4], раздел 8.2) определяет
двунаправленность HTML-элементов. Таблица стилей
правила, обеспечивающие поведение двунаправленного текста, указанное в [HTML4]:
приведено в образце таблицы стилей. В
Спецификация HTML 4 также содержит дополнительную информацию о
проблемы двунаправленности.
  'направление' 
  Стоимость:  л | rtl | наследовать
  Начальный:  л
  Применимо к:  всем элементам, но см. Прозу
  Унаследовано:  да
  В процентах:  Н / Д
  Медиа:  визуальный
  Расчетное значение: , как указано
 Это свойство определяет базовое направление записи блоков и
направление встраивания и переопределения (см. unicode-bidi) для Unicode
двунаправленный алгоритм.Кроме того, он определяет такие вещи, как
направление расположения столбцов таблицы, направление
горизонтальный перелив,
позиция незавершенной последней строки в блоке в случае выравнивания текста:
оправдывать'.
 Значения этого свойства имеют следующие значения:
  ltr 
 Направление слева направо.
  RTL 
 Направление справа налево.
 Для «направления»
свойство, влияющее на переупорядочение встроенных элементов, значение свойства unicode-bidi
должно быть «встроить» или «переопределить».
   Примечание.  Свойство 'direction', когда
указанный для элементов столбца таблицы, не наследуется ячейками в
столбец, поскольку столбцы не являются предками ячеек в дереве документа.
Таким образом, CSS не может легко захватить описанные правила наследования атрибута "dir".
в [HTML4], раздел 11.3.2.1. 
  'юникод-биди' 
  Значение:  нормальное | вставлять | двунаправленный | наследовать
  Начальное:  нормальное
  Применимо к:  всем элементам, но см. Прозу
  Унаследовано:  нет
  В процентах:  Н / Д
  Медиа:  визуальный
  Расчетное значение: , как указано
 Значения этого свойства имеют следующие значения:
  нормальный 
 Элемент не открывает дополнительный уровень встраивания с
относительно двунаправленного алгоритма.Для встроенных элементов
неявное переупорядочение работает вне границ элементов.
  встроенный 
 Если элемент является встроенным, это значение
открывает дополнительный уровень встраивания по отношению к
двунаправленный алгоритм. Направление этого уровня вложения:
дано "направлением"
имущество. Внутри элемента переупорядочивание выполняется неявно. Этот
соответствует добавлению LRE (U + 202A; для 'direction: ltr') или RLE
(U + 202B; для 'direction: rtl') в начале элемента и PDF
(U + 202C) в конце элемента.
  двунаправленное переключение 
 Для встроенных элементов это создает переопределение.
Для блочных контейнерных элементов
это создает переопределение для потомков инлайн-уровня вне
другой блок-контейнер
элемент.
Это означает, что внутри элемента переупорядочивание происходит строго по порядку.
согласно "направлению"
имущество; неявная часть двунаправленного алгоритма
игнорируется. Это соответствует добавлению LRO (U + 202D; for 'direction:
ltr ') или RLO (U + 202E; для' direction: rtl ') в начале
элемент или в начале каждого блока анонимного дочернего блока, если таковой имеется, и
PDF (U + 202C) в конце элемента.
 Последний порядок символов в каждом блок-контейнере - это
так же, как если бы контрольные коды двунаправленного текста были добавлены, как описано выше,
разметка была удалена, и результирующая последовательность символов имела
переданы в реализацию двунаправленного Unicode
алгоритм для обычного текста, который создавал такие же разрывы строк, что и
стилизованный текст.
В этом процессе элементы заменены на 'display: inline'
рассматриваются как
нейтральные символы, если их свойство unicode-bidi не имеет
значение, отличное от "нормального", и в этом случае они рассматриваются как сильные
персонажи в "направлении"
указан для элемента.Все остальные атомарные блоки инлайн-уровня обрабатываются как нейтральные символы.
всегда.
 Обратите внимание, что для того, чтобы иметь возможность передавать встроенные боксы в
равномерное направление (либо полностью слева направо, либо полностью
справа налево), больше встроенных блоков (включая анонимные встроенные блоки)
может потребоваться создать, а некоторые встроенные блоки, возможно, придется разделить
и заказал перед течением.
 Поскольку алгоритм Unicode имеет предел  61 уровень  из
встраивания, следует проявлять осторожность, чтобы не использовать unicode-bidi со значением, отличным от
чем «нормально», если не требуется.В частности, значение "наследовать"
следует использовать с особой осторожностью. Однако для элементов, которые
в целом, предназначенные для отображения в виде блоков, настройка
'unicode-bidi: embed' предпочтительнее, чтобы элементы оставались вместе в
отображение case изменено на inline (см. пример ниже).
 В следующем примере показан XML-документ с двунаправленным
текст. Он иллюстрирует важный принцип дизайна: дизайнеры DTD должны использовать двунаправленные
учитывать как в самом языке (элементы и атрибуты), так и
в любых сопутствующих таблицах стилей.Таблицы стилей должны быть разработаны
так что правила биди отделены от других правил стиля. Правила биди
не должны переопределяться другими таблицами стилей, чтобы документ
поведение двунаправленного текста языка или DTD сохраняется.
 Примеры:
 В этом примере
строчные буквы обозначают символы с письмом слева направо и
Заглавные буквы представляют собой символы с письмом справа налево:
 

   ИВРЕЙСКИЙ1 ИВРЕЙСКИЙ2 английский4 ИВРЕЙСКИЙ4 ИВРЕЙСКИЙ5 
   HEBREW6  HEBREW7  HEBREW8 

<АНГЛИЙСКИЙ>
   english9 english20 english21 HEBREW12 HEBREW13 
   английский24 английский25 английский26 
   english27  HEBREW18 english29 HEBREW20  

  
 Поскольку это XML, таблица стилей отвечает за установку
направление письма.Это таблица стилей:
/ * Правила для биди * /
ЕВРЕЙСКИЙ, HE-QUO {направление: RTL; unicode-bidi: вставлять}
АНГЛИЙСКИЙ {direction: ltr; unicode-bidi: вставлять}

/ * Правила оформления * /
ИВРЕЙСКИЙ, АНГЛИЙСКИЙ, ПАР {display: block}
EMPH {font-weight: bold}
 
 Элемент HEBREW - это блок с основным направлением справа налево,
элемент ENGLISH - это блок с основанием слева направо
направление. PAR - это блоки, которые наследуют базовое направление от
их родители.Таким образом, первые два PAR считываются, начиная с самого верха.
справа, последние три читаются, начиная с верхнего левого угла. Пожалуйста, обрати внимание
что HEBREW и ENGLISH выбраны в качестве имен элементов для ясности
Только; в общем, имена элементов должны передавать структуру без
ссылка на язык.
 Элемент EMPH является встроенным, и, поскольку его значение для 'unicode-bidi' равно 'normal' (
начальное значение), это не влияет на порядок текста. В
Элемент HE-QUO, с другой стороны, создает вложение.
 Форматирование этого текста может выглядеть так, если длина строки
длинный:
               5ТИРВИ 4ТИРВИ английский 4 2ТИРВИ 1ТИРВИ

                                8ТИРВИ  7ТИРВИ  6ТИРВИ

английский9 английский20 английский21 13ТИРВИ 12ТИРВИ

английский24 английский25 английский26

английский 27 20ТИРВИ английский 29 18ТИРВИ
 
 Обратите внимание, что встраивание HE-QUO приводит к тому, что HEBREW18 находится справа
of english29.
 Если строки должны быть разорваны, это может быть примерно так:
       2ТИРВИ 1ТИРВИ
  -EH 4WERBEH английский4
                 5WERB

   -EH  7ТИРВИ  6ТИРВИ
                 8WERB

английский9 английский20 ru-
glish21 12WERBEH
13ВЕРВИ

на английском24 на английском25
английский26

английский 27 18ТИРВИ
20 ВЕРВИ английский 29
 
 Так как HEBREW18 нужно читать перед english29, он находится в строке
выше english29.Просто ломая длинную линию из более раннего
форматирование не сработало бы. Также обратите внимание, что первый слог
из english29 могло уместиться в предыдущей строке, но расстановка переносов
слова, которые пишутся слева направо в контексте справа налево, и наоборот,
обычно подавляется, чтобы не отображать дефис посередине
линии.
 Расширение шаблона · HonKit 
 Еще одна приятная вещь, которую Django предлагает вам, - это шаблон , расширяющий . Что это значит? Это означает, что вы можете использовать одни и те же части вашего HTML для разных страниц вашего сайта.
 Шаблоны помогают, если вы хотите использовать одну и ту же информацию или макет в нескольких местах. Вам не нужно повторяться в каждом файле. И если вы хотите что-то изменить, вам не обязательно делать это в каждом шаблоне, только в одном!
 Создать базовый шаблон 
 Базовый шаблон - это самый простой шаблон, который вы расширяете на каждой странице своего веб-сайта.
 Давайте создадим файл  base.html  в  blog / templates / blog / :
  блог
└─── шаблоны
    └───блог
            база.html
            post_list.html
  
 Затем откройте его в редакторе кода и скопируйте все из файла  post_list.html  в файл  base.html , например:
 блог / шаблоны / блог / base.html
  {% статической нагрузки%}


    
         Блог Django Girls 
        
        
        
    
    
        <заголовок>
          
                
 Блог Django Girls



        <основной>
            
                
                {% за сообщение в сообщениях%}
                    <статья>
                        <время>
                            {{ Почта.Published_date}}
                        
                          
  {{post.title}}  
                         {{post.text | linebreaksbr}}


                {% endfor%}


        
    

   Затем в  base.html  замените весь свой   (все между   и  ) на это:
 блог / шаблоны / блог / база.html
  
    <заголовок>
      
            
 Блог Django Girls   
      
    
    <основной>
        
            
            {% блокировать содержание%}
            {% endblock%}
            
        
    

  
 Вы могли заметить, что это заменило все от  {% for post in posts%}  до  {% endfor%}  на:
 блог / шаблоны / блог / база.html
  {% содержимого блока%}
{% endblock%}
  
 Но почему? Вы только что создали блок  ! Вы использовали тег шаблона  {% block%} , чтобы создать область, в которую будет вставлен HTML. Этот HTML-код будет получен из другого шаблона, расширяющего этот шаблон ( base.html ). Мы покажем вам, как это сделать чуть позже.
 Теперь сохраните  base.html  и снова откройте свой  blog / templates / blog / post_list.html  в редакторе кода.Вы собираетесь удалить все, что выше  {% для сообщения в сообщениях%}  и ниже  {% endfor%} . Когда вы закончите, файл будет выглядеть так:
 блог / templates / blog / post_list.html
  {% для сообщения в сообщениях%}
    <статья>
        <время>
            {{post.published_date}}
        
          
  {{post.title}}  
         {{post.text | linebreaksbr}} 
    
{% endfor%}
  
 Мы хотим использовать это как часть нашего шаблона для всех блоков контента.Пора добавить теги блоков в этот файл!
 Вы хотите, чтобы тег блока соответствовал тегу в файле  base.html . Вы также хотите, чтобы он включал весь код, который принадлежит вашим блокам контента. Для этого поместите все между  {% block content%}  и  {% endblock%} . Как это:
 блог / templates / blog / post_list.html
  {% содержимого блока%}
    {% за сообщение в сообщениях%}
        <статья>
            <время>
                {{ Почта.Published_date}}
            
              
  {{post.title}}  
             {{post.text | linebreaksbr}} 
        
    {% endfor%}
{% endblock%}
  
 Осталось только одно. Нам нужно соединить эти два шаблона вместе. Вот что такое расширение шаблонов! Мы сделаем это, добавив тег extends в начало файла. Как это:
 блог / шаблоны / блог / список_постов.html
  {% extends 'blog / base.html'%}

{% блокировать содержание%}
    {% за сообщение в сообщениях%}
        <статья>
            <время>
                {{post.published_date}}
            
              
  {{post.title}}  
             {{post.text | linebreaksbr}} 
        
    {% endfor%}
{% endblock%}
  
 Вот и все! Сохраните файл и проверьте, правильно ли работает ваш сайт.:)
 Если вы получаете сообщение об ошибке  TemplateDoesNotExist , это означает, что файл  blog / base.html  отсутствует и в консоли запущен сервер запуска  . Попробуйте остановить его (нажав Ctrl + C - клавиши Control и C вместе) и перезапустите его, выполнив команду  python manage.py runserver .
 Создать шаблоны | Введение в Craft CMS 
 Давайте создадим несколько шаблонов и запустим интерфейс на Twig!
 Создание макета 
 Начните с создания шаблона макета в  templates / _layout.веточка .
 Мы собираемся следовать методике DRY (открывается в новом окне), что означает «Не повторяйся». Идея состоит в том, чтобы написать код один раз и максимально использовать его повторно без дублирования. Это упрощает понимание и поддержку кода вашего сайта с течением времени.
 Макет важен для этого, потому что он будет основой других наших шаблонов  расширить .
 Знак подчеркивания ( _ ) в начале  _layout.twig  означает, что шаблон является частным.
 В отличие от быстрого примера, с которого мы начали, вы  не можете просмотреть шаблон , посетив  https: //tutorial.nitro/_layout . Мы можем использовать эти подчеркивания, когда это имеет смысл. В этом случае макет - это всего лишь оболочка, и мы никогда не хотим, чтобы он отображался сам по себе, поэтому частный шаблон идеален.
 Скопируйте следующее в файл  templates / _layout.twig , который вы создали:
 Это простой HTML-код, который будет основой каждой страницы на сайте.
 HTML использует теги или разметку как структурированный способ организации и описания контента. Вы можете сразу узнать тег Craft  siteName  в этой строке:
  title  - это стандартный тег HTML, который сообщает браузеру, как пометить окно или вкладку страницы. Все, что заключено в тег  title , что означает, что отображается между открывающим  </code> и закрывающим <code> .
  siteName  - это тег Twig, который Craft CMS предоставляет для вывода имени нашего сайта.
 Мы будем смешивать HTML и Twig в наших шаблонах, чтобы отображать контент, которым мы управляем, на панели управления.
 Теперь загрузите копию примеров стилей в  web / styles.css : https://raw.githubusercontent.com/craftcms/tutorial-project/main/web/styles.css (открывается в новом окне)
 Это статическая таблица стилей предложит некоторые базовые стили для наших шаблонов.
 Шаблон макета устанавливает язык страницы, соответствующий языку Craft, и добавляет  мета  деталей, которые сообщают браузерам, как интерпретировать текст и как страница вписывается в разные окна браузера.
 Важнейшей частью шаблона является контент .  блок:
. Когда вы видите  {{ }}  или  {%  %} , вы знаете, что смотрите на теги Twig.
 В этом случае мы устанавливаем начало и конец блока с именем  content . Часть содержания   может быть чем угодно, но мы будем использовать этот блок для содержания страницы. Внутри сейчас ничего нет, потому что шаблон макета предоставляет структуру, которую будут заполнять другие дочерние шаблоны.
 Создайте страницу сведений 
 Теперь, когда у нас есть шаблон макета, давайте используем его для страниц сведений о сообщениях в нашем блоге.
 Создайте шаблоны  / blog / _entry.twig  и добавьте к нему следующее:
 Первая строка  расширяет  шаблон макета, что означает, что он будет использовать его в качестве отправной точки и позволит нам в дальнейшем настраивать или отменять все, что мы захотим . Теперь мы предоставляем собственное содержимое в блоке  content  для отображения на странице.
 Теперь, когда шаблон раздела блога готов, вы можете посетить URL-адрес опубликованного сообщения:
 учебник.nitro / blog / my-first-post
 Очевидно, что мы не хотим отображать одинаковый заголовок на каждой странице, поэтому давайте изменим это.
 Для любого шаблона страницы сведений Craft CMS предоставляет специальную переменную  entry , которую мы можем использовать для доступа к содержимому этой записи. Давайте отобразим свойства  title  и  postDate  в шаблоне:
 Теперь он выглядит лучше!
 tutorial.nitro / blog / my-first-post
 Обратите внимание, как мы используем фильтр Twig  | date , чтобы указать форматы для записи .postDate  значение. Это типичный пример использования фильтра для изменения чего-либо в Twig; значение, которое вы хотите изменить или преобразовать, сопровождается вертикальной чертой ( | ), именем фильтра, а иногда и настройками, специфичными для этого фильтра. Вы можете увидеть все доступные фильтры Craft, чтобы лучше понять, что с ними можно делать.
 Давайте затем отобразим «Изображение функции», используя дескриптор  featureImage , который мы создали с этим настраиваемым полем:
 Сначала используется условный оператор  if  (открывает новое окно), чтобы увидеть, есть ли изображение, сохраненное для этого поля. .Поле «Активы», которое мы использовали, может иметь одно или несколько изображений в зависимости от того, как мы его настраиваем, поэтому оператор использует фильтр Twig  | length  для подсчета количества элементов - где  0  будет  false  и все остальное. будет  правда .
 Если утверждение -  true , то есть у нас есть хотя бы одно изображение функции, мы используем  entry.featureImage.all ()  для получения набора, затем цикл  для  для отображения каждого изображения с использованием изображения   Переменная.(Мы ограничили настройки полей ранее, поэтому автор контента может предоставить только одно, но если мы увеличим этот предел позже , каждое изображение  будет отображаться здесь без каких-либо изменений шаблона!)
 Для каждого ресурса мы выводим  img  HTML тег, который сообщает браузеру отображать изображение. Мы используем два тега Twig для предоставления важных сведений об изображении:
  {{image.url}}  дает нам удобный для Интернета URL-адрес изображения
  {{image.title}}  предоставляет текстовое описание мы можем использовать как  alt  текст для доступности
 Теперь мы должны увидеть изображение после обновления страницы:
 tutorial.test / blog / my-first-post
 Он довольно большой.
 Преобразование ресурса 
 Преобразование изображений позволяет указать точные размеры, которые вам нужны, и автоматически обрезать и изменять размер изображения в Craft CMS. Давайте укажем размер нашего «Feature Image».
 Мы будем использовать Twig для создания объекта с именем  featureImage  с желаемыми настройками, затем передадим эти настройки в  image.getUrl ()  вместо  image.url :
 Теперь вы можете обновить лицевую часть. end и просмотрите преобразованный актив: учебник
.test / blog / my-first-post
 Изображение с автоматическим изменением размера, обрезанное до 900 × 600 пикселей. Отображение содержимого матрицы 
 Давайте выведем содержимое публикации, хранящееся в этом поле матрицы.
 Содержимое матрицы хранится в тех блоках, которые мы определили. Чтобы отобразить это содержимое, мы:
 используем еще один цикл  для  для прохождения каждого блока
 используем оператор  if  для обработки вывода на основе типа блока
 Содержимое матрицы теперь будет включено в на странице:
 учебник.test / blog / my-first-post
 Подробная страница с добавленным содержанием сообщения. Используйте include 
 Шаблон становится длиннее, и мы знаем, что снова будем использовать поле «Опубликовать контент» на странице «О нас». Давайте немного приберемся и убедимся, что наш код Matrix можно использовать повторно.
 Для этого мы переместим новый код Twig блока Matrix в его собственный меньший по размеру шаблон, который можно использовать повторно.
 Создайте шаблоны  / _includes / post-blocks.twig  и скопируйте в него этот код:
 Теперь мы можем вернуться к шаблонам  / blog / _entry.twig  и  включают  этот шаблон вместо этого:
  с {блоками: entry.postContent.all ()} только частью  означает, что мы передаем значение  entry.postContent.all ()  в переменную, которую мы ' Он обозначил  блоков . Это означает одно небольшое обновление для шаблонов  / _includes / post-blocks.twig :
 Обновление страницы в вашем браузере ничего не должно изменить, но скрытый Twig теперь немного СУХОЙ и готов к повторному использованию. использовать.
 В папке  _includes  нет ничего особенного, это просто название, которое мы выбрали.Вы уже знаете, что это личная папка, но вы можете называть свою как хотите!
 Пока мы строим, давайте добавим несколько комментариев, чтобы мы могли вспомнить, что мы сделали. Twig игнорирует все, что связано с  {#  и  #} , которые мы будем использовать, чтобы оставлять удобные для человека заметки:
 Вы можете обнаружить, что человек, которому вы чаще всего оставляете записку, это вы сами.
 Отображение категорий сообщений 
 Последнее, что нам нужно сделать в шаблоне сведений о сообщениях, - это вывести категории сообщений с использованием дескриптора поля  postCategories :
 Здесь мы сначала проверяем, есть ли  какие-либо категории, а затем выводим отдельные ссылки.(Эти ссылки пока не ведут на реальные страницы, но мы еще вернемся к этому.)
 Единственные новые биты здесь - это дефисы в теге Twig около  category.title :  {{-  и  -}} . Вы можете использовать их для управления пробелами (открывает новое окно), поэтому на отображаемой странице вместо ...
 ... пустое пространство вокруг заголовка категории будет удалено:
 Это не дает никаких функциональных преимуществ, мы просто подумали, что вам следует знать, что вы можете контролировать пробелы, если вам это нравится.
 Мы использовали глобальный набор для хранения аннотации внизу каждой страницы сайта. Поскольку мы хотим, чтобы это отображалось повсюду, давайте добавим его в  _layout.twig  вместе со строкой об авторских правах:
 Поле «Описание сайта» - это обычный текст без какого-либо форматирования, и просто для удовольствия мы можем использовать фильтр Craft  markdown . для вывода его в теге paragaph (
 ) и поддержки синтаксиса Markdown (открывается в новом окне).
 Добавить страницу со списком 
 Мы будем отображать список сообщений в двух местах: в индексе блога и снова на странице категории, где они ограничены выбранной категорией.
 Начнем сначала с нашей целевой страницы.
 Создайте  шаблонов / blog / index.twig . Каждый раз, когда вы используете  index.twig  или  index.html , это будет шаблон или страница по умолчанию в данной папке. Поэтому, когда мы зайдем на  https: //tutorial.nitro/blog/ ,  blog / index.twig  этой папки будет использоваться для визуализации результата. Добавьте в этот шаблон следующее:
 На нашей странице сведений о записи была автоматически доступна переменная  запись , но здесь мы извлекли все записи в разделе  blog  и поместили их в переменную с именем posts:
 Технический термин для обозначения того, что мы делаем, - это запросы к записям.После того, как эти элементы контента сохранены в Craft CMS, появляется множество опций и параметров, которые вы можете использовать для запроса именно того контента, который вам нужен, где бы он ни был вам нужен.
 Теперь создайте шаблоны  / _includes /isting.twig . Мы будем использовать это для перечисления записей блога на этой странице индекса и повторно использовать его вскоре снова для страницы категории:
 Преобразование изображения аналогично тому, что мы делали ранее, за исключением того, что мы использовали  .one ()  вместо  .all () , поскольку нам нужно только одно изображение.Это также передает объект с шириной   и высотой   непосредственно в  image.getUrl ()  вместо того, чтобы сначала назначать этот объект переменной.
 Вот как выглядит результат:
 В этом шаблоне мы выбрали отображение квадратного эскиза «Feature Image» вместе с заголовком сообщения. Некоторые из этих изображений могут странно обрезаться до квадратов, но мы можем использовать точки фокусировки, чтобы иметь некоторый контроль над тем, как они кадрируются!
 Преобразованные изображения будут автоматически обрезаны от центра, но редактор содержимого также может отрегулировать это, установив точку фокуса на панели управления:
 На панели управления перейдите к изображению с помощью пункта меню  Assets  или  Записи  и выбор соответствующего сообщения в блоге.
 Дважды щелкните актив и выберите  Edit  в правом верхнем углу модального окна предварительного просмотра, чтобы запустить редактор изображений.
 Выберите  Focal Point  и перетащите цель фокусировки в важную область изображения.
 Выберите  Сохранить .
 Вернувшись в интерфейс, обновите страницу списка, и вы увидите повторно обрезанный эскиз:
 Страница списка с измененной точкой фокусировки эскиза. Создать список категорий 
 Создать  шаблонов / blog / _category.twig  и добавьте следующее:
 Точно так же, как страницы сведений о записях автоматически загружались с переменной  записи , страницы категорий имеют специальную переменную  category . Мы используем это здесь, чтобы ограничить только сообщениями в выбранной категории с помощью параметра запроса  relatedTo :
 Наши списки категорий сообщений, к которым вы можете перейти, выбрав любой из тегов сообщения в блоге, теперь должны работать:
 tutorial.nitro / blog / category / ramblings
 Страница со списком сообщений из категории `Ramblings`. Добавить навигацию 
 Сейчас передвигаться довольно неудобно. Давайте добавим навигацию.
 Создайте шаблоны  / _includes / nav.twig  и добавьте к нему следующее:
 Теперь давайте включим это в шаблоны  / _layout.twig :
 Список блогов с навигацией. Использование  craft.app  (открывается в новом окне) дает нам полный доступ ко всему, что предлагает Craft, но это своего рода расширенный режим, поэтому вам не нужно часто на него полагаться.Мы используем его здесь, чтобы получить первый сегмент URL и использовать его для соответствующей стилизации нашей навигации.
 Добавьте шаблон для одного 
 Затем давайте настроим страницу с информацией. Мы настроили его как одиночный, используя шаблон  _singles / about .
 Создайте шаблон  / _singles / about.twig  и добавьте к нему следующее:
 Мы используем специальные служебные классы CSS для создания макета с двумя столбцами, но в остальном вы узнаете все части из предыдущих примеров!
 Страница "О нас". Краткая история верстки HTML / CSS 
 Макетирование может быть трудным, особенно когда дело касается адаптивных макетов. Для новичков огромное разнообразие возможных подходов еще больше сбивает с толку, по крайней мере, так было со мной. Здесь я помещаю эти подходы в контекст и добавляю временную шкалу, чтобы прояснить ситуацию.
 Мне нравится слушать, как коллеги и друзья говорят о старых хороших и плохих временах веб-дизайна, в частности о том, как в прошлом некоторые неинтуитивные, хакерские и иным образом безумные подходы считались лучшими практиками для решения общих задач веб-дизайна.
 Здесь я думаю обо всем: от использования нескольких файлов изображений для создания закругленных углов квадратной рамки, вставки странных символов в CSS для исключения / включения определенных браузеров, до всевозможных других сбивающих с толку подходов к тому, что может показаться довольно простым макетом. задачи.
 Учитывая, что макет страницы является одним из наиболее фундаментальных аспектов разработки веб-сайта, мне кажется удивительным, что CSS не предоставил лучший метод для связывания всех наших элементов страницы вместе с первого дня.
 Ниже я более подробно рассмотрю каждый из наиболее распространенных методов работы с макетом страницы.
 Итак, какие подходы были / являются наиболее распространенными?
 В первый день был HTML-элемент 
, который отлично подходил для создания таблиц. Поскольку макеты веб-сайтов становились все более сложными,  
 вскоре также стал основным методом создания макетов страниц.
 Как этот метод стал таким распространенным? Если мы посмотрим на структуру страниц типичного веб-сайта того времени, нетрудно увидеть сходство с простой компоновкой таблицы:
 К сожалению, по мере того, как веб-сайт становится все более сложным, этот подход быстро ведет нас по огненному пути к аду вложенности, с таблицами внутри таблиц внутри таблиц внутри… что быстро становится трудным для понимания или управления.
 Кроме того, необходимость адаптировать макеты полностью вытеснила этот подход и вернула 
 
 к его первоначальному использованию ... в виде таблиц.
 Хотя приятно оглядываться на старые веб-сайты, построенные с неизвестным количеством вложенных таблиц, этот метод справедливо ограничен книгами по истории CSS!
 Дисплей: строчно-блочный; 
 Я до сих пор помню, как создавал свою первую панель навигации по веб-сайту. Я хотел выровнять три блока рядом друг с другом в одну горизонтальную линию, поэтому - по совету некоторых онлайн-форумов - я невинно использовал  display: inline-block; .
 Конечно, вместо этого:
 Произошло следующее:
 Сначала я предположил, что сделал ошибку или обнаружил ошибку ... но угадайте что, оказалось, что это особенность! Когда свойство  CSS отображает: inline-block; , три элемента ведут себя (правильно) как встроенные элементы, то есть как если бы они были тремя словами в строке.
 Как следствие, любые пробелы между ними в коде HTML интерпретируются (опять же правильно) как релевантные и отображаются как таковые… в моем случае это раздражающий и нежелательный пробел.
 Существовало / было множество решений относительно того, как бороться с этим пробелом, как описано здесь Крисом Койером. Лично мне понравился творческий подход в стиле дзен: просто удалить закрывающие теги из HTML:
. 
 
 
 
 бой 
 
 
 
 пробел 
 
 
 
 Однако в итоге я использовал следующее решение CSS:
 
 ul li {
 дисплей: строчно-блочный; 
 margin-right: -4px; 
} 
 
 Хотя это сработало нормально, здесь мы должны иметь в виду, что ширина нежелательного промежутка зависит от размера шрифта и, следовательно, от отрицательного поля, которое мы применяем для его устранения.
 В конце своей статьи Крис Койер порекомендовал вместо этого использовать числа с плавающей запятой, но к этому моменту я был морально истощен, и поэтому поплавки должны были ждать моего следующего испытания.
 поплавки 
 Другой, немного более свежий подход заключался в использовании свойства  float  в сочетании с различными формами  clear: both;  и часто специальный класс  .clearfix  применяется к различным элементам.
 Комбинируя эти методы со свойством CSS  position , можно было многого добиться, но чтобы заставить вещи работать, мы неизменно заканчивали взломом (по крайней мере, немного) и тратой энергии, заставляя вещи работать, которые должны были работать из коробки.
 Не то чтобы что-то было не так с  float: left; , просто мы использовали его не для той цели, для которой он был изначально предназначен.
 Это лучший вариант с плавающей точкой:
 дисплей: гибкий; 
 Введение в дисплей : гибкий; Недвижимость  в 2012 году стала настоящим шагом вперед, решив многие существующие проблемы с планировкой и порадовав веб-разработчиков и дизайнеров в целом.
 Для макетов страниц, которые могут быть определены в первую очередь в терминах столбцов или строк, flexbox ведет себя фантастически.Например, если мы хотим выровнять три прямоугольника в одну строку,  display: flex;  предоставляет нам современный и простой способ сделать это:
 Или, если вы хотите создать отзывчивую и гибкую навигацию, как показано в , этот пример .
 Когда использование flexbox - неправильный подход? 
 Если вам нужно создать более сложный и полностью управляемый макет - думая как о столбцах, так и о строках - flexbox достигает своих пределов.
 Допустим, ваш дизайнер просит вас создать макет следующего содержания:
 Вы скажете, что это не проблема… пока вы не узнаете, что у него / нее были очень конкретные идеи о том, как макет должен реагировать на мобильные устройства:
 Это момент, когда вы чешете в затылке и вспоминаете, что дизайнер определенно не ваш любимый коллега.
 Для достижения вышеупомянутого - реализованного с использованием flexbox - Javascript необходим для управления элементами HTML, поскольку, как вы можете видеть, сами элементы изменили свой порядок.
 Как раз тогда, когда я начал подозревать, что и сообщество CSS, и разработчики веб-браузеров - это группа мазохистов, которые отказываются разработать правильное решение для макета ... CSS Grid вошел в мою жизнь.
 Сетка CSS 
 На данный момент  display: grid;  - единственное свойство CSS, предназначенное для создания гибких адаптивных макетов сетки.Такой вид макета требует области макета, которой можно управлять в двух измерениях - как по горизонтали, так и по вертикали - и это именно то, что делает CSS Grid.
 В то время как  дисплей: гибкий;  дает вам полный контроль над  или  столбцами или строками, используя  display: grid;  мы можем взять под контроль  и  одновременно.
 С помощью CSS Grid проблему, с которой мы столкнулись выше, можно легко решить, используя только CSS, поскольку теперь у нас есть полный контроль над положением каждого поля в нашей системе сетки.
 Прощай, flexbox? 
 №
 Flexbox и Grid служат разным целям и очень полезны. Как показано в примерах выше, иногда лучшим решением является гибкость.
 Flex и Grid также очень хорошо работают вместе: вы можете поместить гибкий элемент в элемент Grid и наоборот. В каждом случае важно решить, какая система макета лучше всего подходит для этого макета.
 Распространенным подходом здесь является использование Grid для полных макетов страниц и Flex для всего остального.Это отличное практическое правило, однако также возможно - а иногда и правильный подход - использовать сетку и для создания компонентов.
 Прежде чем приступить к разработке, первым делом, возможно, следует подумать о том, является ли компонент, который вы планируете построить, одномерным (Flex) или двухмерным (Grid).
 Начало работы с CSS Grid 
 Это был долгий путь от таблиц HTML к CSS Grid. Для меня было вдохновением читать обо всех тех творческих и находчивых разработчиках, которые максимально использовали доступные свойства и определяли лучшие практики по ходу дела.
 Однако CSS Grid теперь становится новым стандартом. Если вас интересует практическое и увлекательное введение в Grid, ознакомьтесь с моей короткой статьей  Создание макета стоимостью 50 миллионов долларов с помощью CSS Grid , в которой - с помощью всего лишь нескольких свойств Grid - я воссоздаю одну из самых известных картин движение авангард / De Stijl 🙂
 .Навигация по записям
Точка юникод: · — Точка по центру: U+00B7 middot
Сколько получают экономисты: Средняя зарплата экономиста в Москве и других городах России в 2020-2021 годах
Добавить комментарий Отменить ответ
Ваш адрес email не будет опубликован. Обязательные поля помечены *
Комментарий *
Имя * 
Email * 
Сайт 
  

  
Рубрики
Css
Html
Js
Адаптивный сайт
Верстка
Идеи
С чего начать
Советы
Шаблоны
Разное
 © Компания  Вебджем.рф  2009 - 2024 | Все права защищены.

Расположение блоков html: CSS позиционирование, обтекание элементов и контекст наложения

CSS позиционирование, обтекание элементов и контекст наложения

Схемы позиционирования

Нормальный поток

Обтекание

Абсолютное позиционирование

1. Содержащий блок

2. Выбор схемы позиционирования: свойство position

3. Смещение блока: свойства top, right, bottom, left

4. Обтекание: свойство float

5. Управление потоком рядом с плавающими элементами: свойство clear

6. Определение контекста наложения: свойство z-index

6.1. Контекст наложения

position | htmlbook.ru

Краткая информация

Версии CSS

Описание

Синтаксис

Значения

Объектная модель

Браузеры

Позиционирование — Изучение веб-разработки | MDN

Статическое позиционирование

Относительное позиционирование

Введение в top, bottom, left, и right

Абсолютное позиционирование

Контекст позиционирования

Введение в z-index

Фиксированное позиционированиее

position: sticky

Позиционирование в CSS | CSS-Tricks по-русски

Позиционирование в CSS

Box-модель в CSS и типы позиционирования.

Абсолютное позиционирование

Относительное позиционирование.

Фиксированное позиционирование

Z-index

Проблемы позиционирования.

Заключение

Как расположить несколько блоков div в ряд?

Располагаем n блоков div в горизонтальный ряд

Как запретить обтекание блоков <div>

Пример горизонтального расположения нескольких блоков <div>

Урок: блоки в одну строку CSS

Группа блоков внутри родительского блока:

CSS определяющий ширину блока и отступ справа:

Обнуление отступа для последнего дочернего элемента группы:

CSS примет следующий вид:

CSS с указанием, что ширина блока должна учитывать внутренние отступы и границы:

Результат — блоки в одну строку:

CSS: position. Примеры с позиционированием

Нормальное позиционирование: static

Относительное позиционирование: relative

Абсолютное позиционирование: absolute

Фиксированное позиционирование: fixed

Липкое позиционирование — sticky

Реклама

Элементы и методы макета HTML

Пример

Элементы макета HTML

Создать шаблоны | Введение в Craft CMS

Создание макета

Создайте страницу сведений

Преобразование ресурса

Отображение содержимого матрицы

Используйте include

Отображение категорий сообщений

Добавить страницу со списком

Создать список категорий

Добавить навигацию

Добавьте шаблон для одного

Краткая история верстки HTML / CSS

: строчно-блочный;

поплавки

дисплей: гибкий;

Когда использование flexbox - неправильный подход?

Сетка CSS

Прощай, flexbox?