Css position: relative vs position absolute

Параметры позиционирования CSS

Static – это значение свойства по умолчанию. То есть для элемента не задана позиция. Чтобы позиционировать его, мы должны изменить предопределенный тип.

Для этого мы задаем одно из следующих значений:

• position relative CSS;
• absolute;
• fixed;
• sticky.

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

• top;
• right;
• bottom;
• left.

Начальное значение этих свойств — auto.

Элемент, для свойства position которого устанавливается значение absolute или fixed, называется абсолютно позиционированным элементом

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

Значения

static

Алгоритм CSS позиционирования по умолчанию. Блок располагается в соответствии с нормальным потоком. Свойства top, right, bottom и left не применяются.

relative

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

Эффект применения свойства position: relative к табличным элементам:

• table-row-group, table-header-group, table-footer-group и table-row смещаются относительно своей нормальной позиции в пределах таблицы. Если ячейки таблицы объединяют несколько строк, то смещаются только ячейки относительно позиционированной строки;
• table-column-group, table-column не смещают соответствующий столбец, когда применено свойство position: relative;
• table-caption и table-cell смещаются относительно нормальной позиции внутри таблицы. Если ячейка таблицы занимает несколько столбцов или строк, то смещается вся составная ячейка.

absolute

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

sticky

Позиция блока рассчитывается согласно нормальному потоку (как position: relative). Блок смещается и фиксируется относительно области просмотра и внешнего блока, и во всех случаях, включая табличные элементы, он не влияет на положение последующих элементов. Когда элемент позиционирован «прилипанием», положение следующего элемента задается без учета смещения. Эффект от применения position: sticky к табличным элементам такой же, как и от position: relative.

center

CSS позиционирование блоков определяется свойствами top, right, bottom и left. Блок центрируется вертикально и горизонтально внутри контейнера относительно центрального положения блока в содержащем его контейнере. Центрально позиционированные блоки изымаются из нормального потока. Это означает, что они не влияют на разметку последующих элементов (как и absolute). Центрально позиционированные элементы могут иметь отступы, если они не пересекаются с другими.

page

Позиция блока рассчитывается в соответствии с абсолютной моделью. В случае размещения внутри региона внешним блоком всегда является начальный контейнер.

Иначе содержащий блок определяется согласно абсолютной модели.

Как и в абсолютной модели, отступы блока не перекликаются с какими-либо другими отступами.

Fixed positioning

An element with is fixed with respect to the viewport. It stays where it is, even if the document is scrolled. For a fixed element will be repeated on each printed page.

Note that Internet Explorer versions 6 and older do not support fixed positioning at all. If you use one of those browsers you will not be able to see the results of the examples in this section.

Whereas the position and dimensions of an element with are relative to its containing block, the position and dimensions of an element with are always relative to the initial containing block. This is normally the viewport: the browser window or the paper’s page box. To demonstrate this, in the example below you will make one of your elements fixed. You will make the other one very tall in order to cause a scrollbar, to make it easier to see the effect it has.

1. Make the following changes to your CSS code:

#inner {
   width: 5em;
   height: 5em;
   background-color: #999;
   '''position: fixed;''' '''top: 1em;'''
   left: 1em;
 }
 
 #second
   width: 5em;
   '''height: 150em;'''
   background-color: #00f;
   position: absolute;
   top: 1em;
   left: 2em;
 }

1. Save and reload. If you don’t get a vertical scrollbar, increase the value for . (What kind of giant monitor do you have, anyway?) The tall blue element extends beyond the bottom of the window. Scroll the page downward, and keep an eye on the grey square in the top left-hand corner. is now fixed in position 1em from the top of the window and 1em from the left side, therefore as you scroll, the grey box stays in the same place on the screen.

Значения

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

static

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

absolute

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

relative

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

fixed

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

sticky

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

inherit

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

Overlapping Elements

When elements are positioned, they can overlap other elements.

The property specifies the stack order of an element (which element should be placed in front of, or behind, the others).

An element can have a positive or negative stack order:

Because the image has a z-index of -1, it will be placed behind the text.

Example

img
{
 
position: absolute;
  left: 0px;
 
top: 0px;
 
z-index: -1;
}

An element with greater stack order is always in front of an element with a lower stack order.

Note: If two positioned elements overlap without a
specified, the element positioned last in the HTML code will be shown on top.

Типы позиционирования в CSS

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

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

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

• relative;
• absolute;
• inherit;
• fixed;
• static.

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

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

Данный тип позиционирования удаляет элемент в общем потоке документа. Окружающие элементы игнорируют искомый так, будто ему присвоено свойство display: none;.

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

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

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

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

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

Для использования этого вида позиционирования, необходимо для свойства position указать значение relative:

• Данный тип позиционирования не применим к табличным элементам (строки, колонки, ячейки и т. д.);
• Место, которое элемент занимал до смещения, не заполняется выше- или ниже располагающимися элементами и остаётся пустым.

Для того чтобы позиционирование дочернего элемента выполнялось относительно родительского, для первого необходимо указать свойство position: absolute, а для второго — position: relative:

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

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

• Фиксировано позиционированный элемент всегда игнорирует родительские элементы и располагается относительно окна браузера;
• При пролистывании страницы элемент не смещается.

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

Z-Index

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

Таким способом можно добиться некой объёмности страницы.

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

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

Позиционирование фона страницы осуществляется при помощи свойства background-position, значениями которого могут являться процентные соотношения, числовые значения в разных единицах измерения, определённые ключевые слова.

Например:

• background-position: center left;
• background-position: bottom right;
• background-position: 20% 90%;
• background-position: 40px 40 px.

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

Перечисленные схемы позиционирования определяют влияние элемента на соседние и правила его размещения на веб-странице.

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

На сегодня это все. Удачи Вам!

Exercise questions

• Undo the changes from the fixed positioning example and then change the stacking order between the four absolutely positioned squares so that the grey square is at the back, followed by the blue, yellow and cyan squares in that order. (Tip: remove all declarations and start over.)
• Move the yellow square up and to the right by setting and . Then make it appear behind the element, so that the red border appears across the yellow square.
• Modify the layout from the previous exercise to make the navigation use fixed positioning. You’ll have to remove the automatic horizontal margins on the element to make this possible. Add enough content to the main column and/or the sidebar to make a scrollbar appear, so that you can verify that it works.

CSS Properties

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgapgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightrow-gapscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index

“Липкое” позиционирование

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

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

Sticky элемент «прилипает» к своему ближайшему предку с прокруткой, созданной при  равном , ,  или , даже если тот не является ближайшим фактически прокручивающим родителем.

Возьмем пример:

Здесь элемент будет располагаться относительно, пока при прокрутке области просмотра его положение не достигнет точки, в которой он будет находиться на расстоянии 30px от верха области просмотра. В этот момент он станет липким и остается в фиксированной позиции 30 пикселей вверху экрана.

Следующий пример демонстрирует иллюстрирует момент, где первое меню навигации имеет относительное позиционирование по умолчанию, а второе меню настроено на закрепление в самом верху области просмотра. Этот пример будет работать в Chrome, Safari и Opera, а в остальных браузерах только если они уже доработали его поддержку.

See the Pen
position sticky by Андрей (@adlibi)
on CodePen.

Summary

Absolutely positioned elements are removed entirely from the document flow. They will overlap other content unless you make room for them. If all child elements of a container are absolutely positioned, the parent’s height will collapse to zero. Absolutely positioned elements are positioned with respect to a containing block, which is the nearest postioned ancestor. If there is no positioned ancestor, the viewport will be the containing block.

Elements with fixed positioning are fixed with respect to the viewport—the viewport is always their containing block. They always appear at the same place inside the browser window when viewed on screen; when printed, they will appear on each page. The positions of each edge of an absolutely positioned element can be specified with the , , and properties. The value of each property specifies the distance of that edge to the corresponding edge of the element’s containing block.

All positioned elements are rendered at a certain stack level within a stacking context. You can change the stack level of a positioned element using the property. When is specified as an integer value, the element establishes a local stacking context for its descentants.

Вертикальное и горизонтальное центрирование в CSS уровня 3

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

Побочный эффект абсолютного позиционирования абзаца состоит в
том, что абзац становится ровно таким широким, каким он должен быть
(если только мы явно не укажем ширину). В примере ниже мы именно
этого и хотим: мы размещаем по центру абзац из одного слова
(“Центр!“), так что ширина абзаца должна быть равна ширине этого
слова.

Центр!

Жёлтый фон наглядно демонстрирует, что абзац действительно той
же ширины, что и его содержимое. Мы подразумеваем, что разметка
осталась прежней:

<div class=container4>
  <p>Центр!
</div>

В плане вертикального центрирования эта таблица стилей схожа с
таблицей из предыдущего примера. Но теперь мы ещё перемещаем
элемент на полпути через контейнер с помощью правила ‘left: 50%’ и
одновременно сдвигаем его влево на половину своей собственной
ширины в преобразовании ‘translate’:

div.container4 {
    height: 10em;
    position: relative }
div.container4 p {
    margin: 0;
    background: yellow;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%) }

Следующий пример объясняет, зачем требуется правило
‘margin-right: -50%’.

Когда форматер CSS поддерживает ‘flex’, всё становится ещё
легче:

Центр!

с этой таблицей стилей:

div.container6 {
  height: 10em;
  display: flex;
  align-items: center;
  justify-content: center }
div.container6 p {
  margin: 0 }

Property Values

Value	Description	Play it
static	Default value. Elements render in order, as they appear in the document flow	Play it »
absolute	The element is positioned relative to its first positioned (not static) ancestor element	Play it »
fixed	The element is positioned relative to the browser window	Play it »
relative	The element is positioned relative to its normal position, so «left:20px» adds 20 pixels to the element’s LEFT position	Play it »
sticky	The element is positioned based on the user’s scroll position A sticky element toggles between and , depending on the scroll position. It is positioned relative until a given offset position is met in the viewport — then it «sticks» in place (like position:fixed). Note: Not supported in IE/Edge 15 or earlier. Supported in Safari from version 6.1 with a -webkit- prefix.	Try it »
initial	Sets this property to its default value. Read about initial	Play it »
inherit	Inherits this property from its parent element. Read about inherit

position: sticky;

An element with is positioned based on the user’s scroll position.

A sticky element toggles between and , depending on the scroll position. It is positioned relative until a given offset position is met in the viewport — then it «sticks» in place (like position:fixed).

Note: Internet Explorer does not support sticky positioning. Safari requires a -webkit-
prefix (see example below). You must also specify at least one of , , or for
sticky positioning to work.

In this example, the sticky element sticks to the top of the page (), when you reach its scroll position.

Example

div.sticky {  position: -webkit-sticky; /* Safari */  position:
sticky;  top: 0;  background-color: green; 
border: 2px solid #4CAF50;}

CSS position: relative

Свойство position: relative — относительное позиционирование. Мы видели пример использования этого элемента чуть выше.

При задании этого параметра, активизируются следующие параметры:

• top
• bottom
• left
• right

Если не указано никаких смещений, т.е.

то отображение html-элемента происходит на том же месте как и по умолчанию (т.е. без задания relative). Если же указаны смещения, то элемент будет смещен относительно своего расположения либо ниже, выше, левее или правее. При этом другие окружающие элементы считают, что никакого смещения нету. Короче говоря, использовать relative имеет смысл только если мы задали смещения.

Для пояснения этой особенности приведем пример.

Примера 2. HTML-код:

Код преобразуется в следующее:

Примера 2*. Добавим к первому диву: position: relative;. HTML-код:

Код преобразуется в следующее:

Наш красный квадрат переместился на 200 пикселей влево и на 100 пикселей вниз и частично своей площадью закрыл текст. При этом то место, где должен был наш квадрат текст по-прежнему его огибает как будто он там есть.

Introduction

Absolutely positioned elements are removed entirely from the document flow. That means they have no effect at all on their parent element or on the elements that occur after them in the source code. An absolutely positioned element will therefore overlap other content unless you take action to prevent it. Sometimes, of course, this overlap is exactly what you desire, but you should be aware of it, to make sure you are getting the layout you want!

Fixed positioning is really just a specialized form of absolute positioning; elements with fixed positioning are fixed relative to the viewport/browser window rather than the containing element; even if the page is scrolled, they stay in exactly the same position inside the browser window.

Before I talk about all this though, I’ll cover an essential prequisite concept—containing blocks.

Любопытные факты и примечания

Элементы с CSS position absolute, использующие свойства смещения, могут иметь отступы (margins),которые размещаются внутри контекста позиционирования.

Абсолютно позиционируемый элемент займет столько горизонтального и вертикального пространства, сколько потребуется для его контента. Его можно растянуть, и он заполнит ширину своего контейнера. Для этого нужно оставить его ширину (width) неопределенной и расположить его левую границу на левой границе родителя, а правую границу – на правой границе родителя, используя свойства смещения right и left:

position: absolute;
left: 0;
right: 0;

Аналогично абсолютно позиционируемый элемент может быть растянут вертикально с помощью свойств top и bottom:

position: relative;
top: 0;
bottom: 0;

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

• если оба свойства top и bottom определены, то top имеет большую силу;
• если right и left определены, left выигрывает;
• если свойство direction имеет значение rtl (например, арабский), то «побеждает» right.

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

Позиционирование элементов с типом absolute

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

В приведенной ниже демо-версии проиллюстрировано данное поведение:

В примере мы задаем зеленому полю тип позиционирования absolute со значением смещения bottom:0 и left:0. Кроме этого мы не указываем тип позиционирования для его прямого родителя (красное поле).

В то же время мы позиционируем относительно элемент с классом jumbotron

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

Центрирование по вертикали в CSS уровня 3

Уровень 3 CSS предлагает и другие возможности. На момент
написания этой статьи (2014 год), хороший способ вертикального
выравнивания блока без использования абсолютного позиционирования
(что может приводить к частичному перекрытию текста) всё ещё
обсуждается. Но если вам известно, что частичное перекрытие текста
не станет проблемой в вашем документе, вы можете использовать
свойство ‘transform’, чтобы выровнять по центру абсолютно
позиционированный элемент. Например:

Этот абзац выровнен вертикально по центру.

Для документа, который выглядит вот так:

<div class=container3>
  <p>Этот абзац…
</div>

таблица стилей выглядит так:

div.container3 {
   height: 10em;
   position: relative }              /* 1 */
div.container3 p {
   margin: 0;
   position: absolute;               /* 2 */
   top: 50%;                         /* 3 */
   transform: translate(0, -50%) }   /* 4 */

Основные правила:

1. Сделайте контейнер относительно позиционированным
   (position: relative), что превратит его в контейнер для абсолютно
   позиционированных элементов.

2. Сам элемент сделайте абсолютно позиционированным
   (position: absolute).

3. Поместите элемент посередине контейнера с помощью ‘top: 50%’.
   (Заметьте, что ‘50%’ здесь означают 50% высоты контейнера.)

4. Используйте translate, чтобы переместить элемент вверх на
   половину своей собственной высоты. ( ‘50%’ в ‘translate(0, -50%)’
   указывают на высоту самого элемента.)

Недавно (начиная приблизительно с 2015-го года) в нескольких
реализациях CSS стала доступна новая техника. Она основана на новом
ключевом слове ‘flex’ для свойства ‘display’. Это ключевое слово
предназначено для использования в графическом интерфейсе
пользователя (GUI), но ничто не мешает вам использовать его в
документе, если у этого документа правильная структура.

Этот абзац выровнен по центру вертикально.

таблица стилей выглядит следующим образом:

Вертикальное центрирование

CSS уровня 2 не обладает свойством вертикального центрирования.
Вероятно, оно появится в версии CSS уровня 3 (см. ). Но даже в CSS2 вы можете центрировать блоки вертикально при
помощи комбинирования нескольких свойств. Хитрость заключается в
том, чтобы указать, что внешний блок должен быть отформатирован как
ячейка таблицы, т.к. содержимое ячейки таблицы может
быть выровнено по центру вертикально.

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

DIV.container {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle }
...
<DIV class="container">
  <P>Этот маленький абзац...
</DIV>