), списки (

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

А теперь о

ах.

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

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


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







А это CSS:
#1 {
position:relative;
top:100px;
left:100px;
width:500px;
height:500px;
background-color:#CCCCCC;
}
#11 {
background-color:#003399;
position:absolute;
bottom: -30px;
right: -50px;
width:100px;
height:100px;
}
#2 {
background-color:#990066;
width:200px;
height:300px
}
Потренируйтесь.
Пока писал и сам разобрался .
Позиционирование блоков css один из важнейших этапов верстки, потому что именно это влияет на адаптивность сайта или на возможность её реализации в дальнейшем (если на данный момент не требуется), а так же оказывает значительное влияние на дальнейшее масштабирование сайта. Не редки случаи когда «горе-верстальщики» делают такую верстку, что в итоге её проще выкинуть чем что то изменить, но при это она может выглядеть полностью в соответствии с макетом. Данная ситуация возникает из за не понимания где и когда использовать тот или иной тип позиционирования. Сегодня мы попробуем разобраться в данном вопросе. И так, в css существует свойство position. Данное свойство может принимать 5 значений, но мы рассмотрим 4 основных:
• absolute
• static
• relative
• fixed
Абсолютное позиционирование блоков (absolute)
Первый, в нашем списке, способ позиционирование — это абсолютное. При назначении данного свойства, блок становится самостоятельно единицей и остальные элементы страницы не влияют на его расположение, а так же и он не влияет на другие элементы. Размер блока определяется свойствами width и height, а расположение на странице — свойствами top. left, right и bottom эти параметры задают отступы от верхнего, левого, правого и нижнего края. Если у блока нет родительского элемента, а так же если позиционирование родительского элемента отлично от static, то top, left, bottom, right свойства задают отступы от начала страницы, в противном случае от краев родительского элемента.
Чаще всего данный вид позиционирования используется, когда блок нужно прижать к правому или нижнем краю. Рассмотрим такой макет.
Для удобства блоки были выделены разноцветно рамкой. Разметка будет выглядеть следующим образом:
XHTML
Relation { position: relative; } .yellow { position: absolute; right: 10px; bottom: 10px; }
Relation position : relative ; Yellow position : absolute ; right : 10px ; bottom : 10px ;
В данном примере мы воспользовались свойствами right и bottom для того что бы задать отступ от правого и нижнего края. Данные значения свойств равносильны значениям top: Высота элемента — 10px и left: Ширина элемента — 10px.
Так же абсолютное позиционирование иногда применяется когда необходимо сделать «наезд» одного элемента на другой.
Статичное позиционирование (static)
Самый распространенный вид позиционирования которое встречается на каждой странице и как правило задан для большинства элементов — статичное, в css пишется как static. Для большинства HTML тегов данное значение определяется по умолчанию т.е. если position явно не задан, то значение будет static. При таком расположении элементы выстраиваются друг под другом и координаты в окне каждого элемента зависит от ближайших элементов с position: static или position: relative. Свойства top, left, right, bottom не сработают при таком позиционировании, изменение расположение происходит за счет свойства margin.
Относительно позиционирование (relative)
Данный вид позиционирования очень похож на статичный за исключением того что, расположение элемента можно изменять свойствами top, left, right, bottom и margin.
Фиксированное позиционирование (fixed)
Фиксированное позиционирование по особенностям задания координат похоже на абсолютное, но расположение высчитывается не относительно HTML страницы, а относительно окна браузера, т.е. при свойстве top: 10px, вы зададите отступ сверху равный 10px ОТ ОКНА БРАУЗЕРА и вне зависимости от того на каком уровне прокрутки страницы вы находитесь, данный элемент всегда будет следовать с вашим экраном.
Обычно используется для элементов навигации, что бы у пользователя была всегда на виду важная информация или ссылки на интересные страницы.
При относительном позиционировании блока надо задать свойство position:relative и свойства смещения. Смещение в этом случае будет происходить не относительно "родительского" элемента (как при абсолютном позиционировании), а относительно самого блока в нормальном потоке. Это будет понятнее на примере. Пусть у нас есть html-страница с тремя div-ами:
Относительное позиционирование
Давайте зададим в таблице стилей размеры и границы этих блоков:
#blok1, #blok2, #blok3 { border:1px solid red; width:150px; height:50px; }
Сейчас наша страница в браузере выглядит так:
Теперь давайте изменим положение второго блока, для этого добавим в страницу стилей правило:
#blok1, #blok2, #blok3 { border:1px solid red; width:150px; height:50px; } #blok2{ position:relative; left:50px; top:25px; }
Теперь наша страница выглядит так:

Наш второй блок сместился вниз и вправо относительно того места, где бы он находился в нормальном потоке. Остальные же блоки остались на своих местах. Практически относительное позиционирование применяется достаточно редко, поэтому мы не будем больше уделять этому внимание и рассмотрим плавающие блоки.
Плавающие блоки
Эти блоки нельзя позиционировать с точностью до пиксела, как в предыдущих схемах, но именно эта схема позиционирования очень распространенна. Без плавающих блоков обходится редкий сайт, а уж сделать "резиновую" верстку сайта без них и вовсе невозможно.
Такие блоки могут свободно перемещаться по странице, подобным образом ведут себя картинки в HTML, выровненные с помоьщью параметра align .
Плавающие блоки определяются свойством float , который определяет будет ли блок плавающим и в какую сторону он будет перемещаться. Возможны три варианта:
• left - блок прижимается к левому краю, остальные элементы обтекают его с правой стороны.


• right - блок прижимается к правому краю, остальные элементы обтекают его с левой стороны.


• none - блок не перемещается и позиционируется согласно свойству position .
Давайте посмотрим на примере. Пусть у нас есть html-страница со следующим кодом:
Позиционирование блоков
Текст блока 1
И страница style.css со следующим кодом:
#blok1{ border:1px solid red; width:150px; height:50px; }
Сейчас наша страница в браузере выглядит так:
Давайте сделаем наш блок плавающим и прижмем его к левому краю:
#blok1{ border:1px solid red; width:150px; height:50px; float:left; }
Теперь давайте прижмем блок к правому краю:
#blok1{ border:1px solid red; width:150px; height:50px; float:right; }
Теперь наша страница в браузере выглядит так:
А что будет, если плавающих блоков на странице несколько? Давайте добавим в нашу html-страницу еще один блок:
Позиционирование блоков
Текст блока 1
Текст блока 2
Просто какие-то элементы на странице. Это может быть просто текст, ссылки, списки, картинки и т.д.
И зададим им разные значения свойства float :
#blok1{ border:1px solid red; width:150px; height:50px; float:left; } #blok2{ border:1px solid red; width:150px; height:50px; float:right; }
Теперь наша страница в браузере выглядит так:
А если у них будут одинаковые значения? Например:
#blok1{ border:1px solid red; width:150px; height:50px; float:left; } #blok2{ border:1px solid red; width:150px; height:50px; float:left; }
Тогда второй блок прижмется к правому краю первого блока:
Аналогична будет ситуация при одинаковых значениях right :
#blok1{ border:1px solid red; width:150px; height:50px; float:right; } #blok2{ border:1px solid red; width:150px; height:50px; float:right; }
Обратите внимание: сначала к правому краю прижмется блок 1, а уже к нему прижмется блок 2.
А что делать, если мы хотим, чтобы блоки были прижаты к правому краю, но располагались бы один под другим. Для этого существует свойство clear , которое определяет, какие стороны плавающего блока не могут соседствовать с другими плавающими блоками. У этог свойства может быть задано одно из четырех значений:
• left - блок должен располагаться ниже всех левосторонних блоков.


• right - блок должен располагаться ниже всех правосторонних блоков.


• both - блок должен располагаться ниже всех плавающих блоков.


• none - никаких ограничений нет, это значение по умолчанию.


Давайте в нашем последнем примере зададим это свойство для второго блока:
#blok1{ border:1px solid red; width:150px; height:50px; float:right; } #blok2{ border:1px solid red; width:150px; height:50px; float:right; clear:right; }
Теперь получилось так, как и хотелось: один блок под другим:

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

Давайте посмотрим, как ее можно сделать с помощью плавающих блоков. Итак, код самой страницы следующий:
Позиционирование блоков
шапка сайта
Контент
блок новостей
низ сайта
На странице style.css зададим сначала размеры и фон для наших блоков:
#header{ background:darkred; width:715px; height:100px; } #menu{ background:oldlace; width:190px; height:300px; } #content{ background:oldlace; width:525px; height:300px; } #footer{ background:darkred; width:715px; height:30px; } #news{ background:yellow; width:150px; height:280px; }
Сейчас наши блоки располагаются в нормальном потоке, т.е. один под другим. Нам надо сделать блоки menu и content плавающими и левосторонними. А блок news должен прижиматься к правому краю, т.е. его мы сделаем правосторонним плавающим блоком:
#header{ background:darkred; width:715px; height:100px; } #menu{ background:oldlace; width:190px; height:300px; float:left; } #content{ background:oldlace; width:525px; height:300px; float:left; } #footer{ background:darkred; width:715px; height:30px; } #news{ background:yellow; width:150px; height:280px; float:right; }
Наша страница в браузере выглядит так:

Посмотрим на наш блок новостей, видно, что он располагается ниже текста в блоке content . А ведь мы хотели, чтобы блок новостей был справа, а текст обтекал бы его слева.
Почему же у нас так не получилось? Потому что наш блок news в html-коде располагается ниже текста и его будет обтекать только тот текст, который расположен ниже его. Чтобы исправить это надо поместить наш div="news" выше текста (т.е. до слова "контент"):
Позиционирование блоков
шапка сайта
блок новостей
Контент
низ сайта
Вот теперь наш блок новостей находится на своем месте:

А чтобы он не прижимался вплотную к верхнему и правому краям, мы добавим для этого блока значение полей:
#news{ background:yellow; width:150px; height:280px; float:right; margin:10px; }
Теперь мы добились такого же резельтата, как и при абсолютном позиционировании.

Согласитесь, что с помощью плавающих блоков верстать страницу проще: не надо рассчитывать пикселы, да и код короче. К тому же при "резиновой" верстке мы и не можем указать точное расположение блока на экране, а с помощью плавающих блоков нам это и не нужно, достаточно указать лишь ориентир (слева, справа, ниже или в той же линии).
Фиксированные блоки
Как вы помните при фиксированном позиционировании блок фиксируется относительно области просмотра. В некотором смысле фиксированные блоки похожи на фреймы. Только внутри фрейма доступна прокрутка, а внутри блока нет.
У фиксированных блоков есть один существенный недостаток: они не поддерживаются браузерами Internet Explorer. А потому использовать их пока не следует. Поэтому здесь мы лишь укажем синтаксис такого правила, если хотите попробуйте сами (например, в браузере Opera).
#blok{ position:fixed; left:0px; top:0px; }
Блок с идентификатором "blok" будет при прокрутке страницы оставаться на месте.
На сегодня все. В следующем уроке мы познакомимся еще с некоторыми свойствами блоков и их видами.
Эта статья учебника будет посвящена очень важной теме, которая связана с позиционированием элементов на странице, она потребует от Вас максимального внимания. Вы познакомитесь с такими типами позиционирования элементов как: абсолютное , относительное , фиксированное и статическое .
Позиционирование позволит Вам разместить тот, или иной элемент в том месте, где это Вам необходимо, цель этой статьи заключается в том, чтобы понять по каким правилам это происходит, какие при этом необходимо использовать CSS свойства и для чего.
Типы позиционирования элементов
Основное свойство CSS, которое позволяет управлять позиционированием элементов на странице это свойство position , оно сообщает браузеру, какой тип позиционирования используется для элемента (статический - static , относительный - relative , абсолютный – absolute , или фиксированный - fixed ).
Для полного понимания как происходит позиционирование элементов на любой странице, Вам необходимо детально изучить все виды позиционирования. Эта статья учебника предоставит Вам такую возможность, сейчас мы с Вами отдельно поговорим о каждом виде позиционирования и разберем, как и относительного чего происходит смещение элементов в документе.
Абсолютное позиционирование
Как вы заметили, элементы, которые имеют абсолютное позиционирование , отделяются от основного потока страницы , что может приводить к наслоению элементов друг на друга. Еще один нюанс работы с элементами, которые имеют абсолютное позиционирование , это то, что они не могут быть плавающими . Плавающими элементами могут быть только элементы, которые имеют статическое позиционирование (static ), то есть то, которое установлено у элемента по умолчанию. Методы работы с плавающими элементами мы с Вами рассматривали в статье учебника " ".
Относительное позиционирование
Следующий тип позиционирования, который мы рассмотрим это . Элементы, для которых задано относительное позиционирование (position : relative ) смещаются (размещаются) , или другими словами .
Давайте сразу перейдем к примеру, а затем поговорим обо всех нюансах, которые будут возникать при работе с .
static
class = "relative" > relative
class = "static" > static
И так, что мы сделали в этом примере:
• Для блоков (элементы
  ), которые имеют статическое позиционирование (по умолчанию) установили высоту 50 пикселей и цвет заднего фона – красный .
• Разместили между блоков элемент с относительным позиционированием (position : relative ), установили для него высоту 100 пикселей и цвет заднего фона зеленый . Кроме того указали, что он смещается относительно его текущей позиции от верхнего края на 50 пикселей , а с левого края на 100 пикселей , вызывая при этом переполнение документа.
Результат нашего примера:
Еще необходимо подчеркнуть из этого примера, то, что в отличие от абсолютного позиционирования другие элементы в документе реагируют на элементы с относительным позиционированием . Не смотря на то, что мы дали браузеру команду на перемещение элемента, браузер зарезервировал место под элемент, оставляя при этом пустое место, где элемент изначально должен находиться до перемещения.
На практике, Вам, скорее всего, не придется перемещать элементы, которые имеют относительное позиционирование . Основная идея относительного позиционирования заключается в том, чтобы не сдвинуть куда-то элемент, а создать «контейнер» для элемента, который имеет абсолютное позиционирование . Другими словами, вложенные элементы будут смещаться не относительно края окна браузера, а относительно этого элемента, который будет иметь относительное позиционирование и находится в основном потоке документа . Более подробно этот момент мы рассмотрим далее в этой статье учебника.
Фиксированное позиционирование
Третий тип позиционирования, который мы рассмотрим это . При фиксированном позиционировании элемент сдвигается относительно заданного края окна браузера . Отличительная особенность этого позиционирования заключается в том, что при прокрутке страницы элемент остается на одном месте , то есть, грубо говоря, он прокручивается вместе со страницей (элемент зафиксирован).
Я думаю, что путешествуя по сети интернет, вы не раз встречали меню навигации, боковые панели, или даже кнопки "вверх страницы", которые были зафиксированы на одном месте. Всё это становится возможным благодаря фиксированному позиционированию .
Давайте рассмотрим пример, в котором мы оформим фиксированную боковую панель.
fixed
class = "container" >
Давайте разберем, что мы сделали в этом примере:
• Установили для элементов и высоту равную 100% , это нам позволит задать высоту в процентах для нашей боковой панели. Кроме того, мы убрали внешние отступы (margin) для этих элементов, это необходимо, чтобы убрать встроенные стили браузера.
• Для нашей боковой панели установили высоту равной родительскому элементу (100% ), установили ширину 15% от родительского элемента и установили цвет заднего фона красный . Кроме того указали, что наша боковая панель имеет фиксированное позиционирование , что позволяет её как будто прилепить к экрану. Чтобы наша панель отображалась справа, мы установили значение right равным 0 (смещение позиционированного элемента от правого края окна браузера).
• Для демонстрации фиксированного позиционирования мы создали контейнер высотой 2000 пикселей . Теперь если прокрутить страницу наша боковая панель останется на месте, а содержимое контейнера (основного содержимого) будет прокручиваться.
Результат нашего примера:
Статическое позиционирование
Ну и заключительный тип позиционирования это статическое позиционирование (static ), мы с Вами уже неоднократно говорили о нем. Статическое позиционирование это классическое в потоке HTML документа
Хочу обратить Ваше внимание на один факт, что вышерассмотренные свойства, отвечающие за смещение элементов, не допускается применять к элементам, которые имеют статическое позиционирование , то есть имеют позиционирование, которое установлено по умолчанию.
Продвинутое абсолютное позиционирование
Перед тем как перейти к рассмотрению продвинутого применения абсолютного позиционирования , хочу обратить Ваше внимание, на то, что если вы не указываете значение вертикальной позиции элемента с абсолютным позиционированием (top , или bottom), или наоборот горизонтальной позиции (left , или right), то браузер оставит элемент в том же месте на странице, где он находится в общем потоке (будет размещен поверх содержимого, если оно есть).
Мы уже с Вами узнали о том, что элемент с абсолютным позиционированием (position : absolute ) позиционируется относительно заданного края его предка , при этом предок должен иметь значение position отличное от, установленного по умолчанию - static , иначе отсчёт (смещение) будет вестись относительно, указанного края окна браузера . Настало время рассмотреть подобный пример:
relative
class = "container" > container
class = "absolute" > absolute
Давайте внимательно разберем, что мы сделали в этом примере:
• Для начала мы разместили блок (элемент
  ), который имеет относительное позиционирование . Указали для него внутренний отступ от верха (margin-top) равный 100 пикселей , задали ширину, высоту и цвет заднего фона.
• Далее внутри него разместили блочный элемент (элемент
  ), который имеет высоту 100 пикселей и цвет заднего фона жёлтый . Как вы понимаете, этот элемент имеет статическое позиционирование (значение по умолчанию), так как значение свойства position не наследуется , и он не унаследовал от родительского блока относительное позиционирование .
• Затем мы поместили внутри нашего контейнера со статическим позиционированием элемент, который имеет абсолютное позиционирование . Указали для него ширину и высоту равными 50 пикселей и цвет заднего фона красный . Обратите внимание на самый важный момент, что этот элемент позиционируется не относительно окна браузера, не относительно родительского элемента, а относительно своего предка, который имеет позиционирование, отличное от статического! В итоге наш элемент мы разместили в верхнем правом углу его предка с относительным позиционированием .
Результат нашего примера:
Давайте подытожим изученную в этой статье учебника информацию о позиционировании элементов:
• Статическое позиционирование это классическое размещение элементов сверху вниз (элементы отображаются в порядке, как они указаны в потоке HTML документа ), оно считается значением по умолчанию для всех элементов.
• Элемент позиционируется относительно окна браузера , если у него фиксированное позиционирование (элемент зафиксирован при прокрутке документа).
• Элемент позиционируется относительно окна браузера , если у него абсолютное позиционирование , и он не вложен в элемент, который имеет позиционирование, отличное от статического .
• Элемент, для которого задано относительное позиционирование смещается относительно положения в потоке документа (относительно его текущей позиции ).
• Элемент позиционируется относительно сторон другого элемента в том случае, если он имеет предка, или родителя с абсолютным , относительным или фиксированным позиционированием .
Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практическое задание:


2016-2019 Денис Большаков, замечания и предложения по работе сайта Вы можете направить по адресу сайт@gmail.com