Позиционирование в html – Абсолютное позиционирование и строчные элементы — Позиционирование — HTML Academy

Позиционирование элементов в CSS | w3.org.ua

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

• static
• relative
• fixed
• absolute

Элементы, к которым применено свойство position можно позиционировать используя свойства:

• top — отступ сверху
• left — отступ слева
• right — оступ справа
• bottom — отступ снизу

Перечисленные свойства top, left, right, bottom не работают, пока к элементу не применено свойство position

Если свойства left и right противоречат друг другу, то сработает только left. Аналогично при top и bottom, которые противоречат друг другу, сработает только top.

position: static

HTML элементы позиционируются как static по умолчанию. Т.е. элементы выводятся в основном потоке — так, как записаны в коде HTML. Все элементы, которым не задано свойство position, позиционируются как static.

position: relative

Если к элементу применено свойство position: relative, то элемент не изменяет своей позиции. После применения свойств left, top, right, bottom, элемент смещается относительно своей первоначальной позиции на указанное значение. Данное смещение не влияет на остальные элементы.

position: fixed

Если к элементу применили свойство position: fixed, то он будет позиционироваться относительно окна браузера, и не будет изменять своего положения при прокрутке документа.

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

position: absolute

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

Если к элементу применено свойство position: absolute, то оно отменяет свойство float.

Порядок наложения элементов с помощью z-index

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

Изменить порядок наложения можно с помощью свойства CSS z-index. Так, если к двум элементам применен z-index, то тот элемент, у которого z-index больше, будет отображен на переднем плане.

Свойство z-index работает только с элементами, к которым применено свойство position.

Свойство z-index это просто число, без единиц измерения.

Иногда нужно выровнять блочный элемент по центру экрана так, чтобы даже при изменении ширины блок оставался по центру. Для этого используют свойство margin: 0 auto. Подробный пример можно посмотреть здесь.

Подробнее о позиционировании | WebReference

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

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

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

Обуздание float

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

При обтекании позиционирование элемента зависит от расположения других элементов вокруг него. Будет ли элемент находиться на одной строке? Появится ли он на новой строке? Всё это зависит от DOM (Document Object Model, объектная модель документа) и того, что окружает элемент.

Что такое DOM?

DOM или Document Object Model — это API для HTML и XML-документов, который обеспечивает их структурное представление. В нашем случае мы говорим конкретно об HTML-документах, таким образом, DOM представляет все различные элементы и их взаимосвязи друг с другом.

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

Хотя float предлагает совсем немного огневой мощи, он приходит с некоторыми своими собственными проблемами. Самая популярная проблема включает в себя родительский элемент, содержащий многочисленные обтекаемые элементы. Содержимое на странице будет соблюдать размер и размещение обтекаемого дочернего элемента, но эти обтекаемые элементы больше не влияют на внешние края родительского контейнера. В этом случае родительский элемент теряет контекст именно тем, что его содержимое схлопывается, тем самым устанавливая height у родительского элемента как 0 и игнорируя другие разные свойства. Много раз это может остаться незамеченным, особенно когда родительский элемент не содержит каких-либо привязанных к нему стилей и вложенные элементы выглядят выровненными правильно.

Если вложенные элементы не выстраиваются правильно, могут появиться ошибки стилизации. Взгляните ниже на демонстрацию, раздел box-set должен содержать светло-серый фон, однако фон не виден, пока все вложенные в него элементы обтекаемые. При инспектировании раздела box-set вы увидите, что height у него равен 0.

HTML

<div>
  <figure>Блок 1</figure>
  <figure>Блок 2</figure>
  <figure>Блок 3</figure>
</div>

CSS

.box-set {
  background: #eaeaed;
}
.box {
  background: #2db34a;
  float: left;
  margin: 1.858736059%;
  width: 29.615861214%;
}

Демонстрация обуздания float

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

К счастью, есть несколько разных методов, которые мы можем использовать для обуздания float, наиболее популярные включают технику overflow и технику clearfix.

Техника overflow

Одним из способов обуздания float в родительском элементе является использование стилевого свойства overflow. Установка у свойства overflow значения auto внутри родительского элемента обуздает float, в результате чего у родителя появится реальная высота, в том числе серый фон в нашем примере.

Чтобы это работало в Internet Explorer 6 для родителя требуется добавить height или width. Поскольку height, вероятно, будет переменной, то ширина 100% обеспечит этот трюк. С помощью overflow: auto; в Internet Explorer на компьютере Apple к родительскому элементу также добавятся полосы прокрутки, поэтому лучше использовать запись overflow: hidden;.

.box-set {
  overflow: auto;
}

Демонстрация техники overflow

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

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

Демонстрация ошибок overflow

Техника clearfix

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

Метод clearfix базируется на использовании псевдоэлементов :before и :after для родительского элемента. С помощью этих псевдоэлементов вы можете создать скрытые элементы выше и ниже содержимого родителя, содержащего float. Псевдоэлемент :before используется для предотвращения схлопывания верхнего margin у дочерних элементов путём создания анонимного табличного элемента с помощью записи display: table;. Это также помогает обеспечить стойкость в Internet Explorer 6 и 7. Псевдоэлемент :after используется для предотвращения схлопывания нижнего margin у дочерних элементов, а также для очистки вложенных float.

Добавление свойства *zoom к родительскому элементу запускает механизм hasLayout специально для Internet Explorer 6 и 7, который определяет, как элементы должны рисоваться и связаны с их содержимым, а также как элементы должны взаимодействовать и относятся к другим элементам.

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

.box-set:before,
.box-set:after {
  content: "";
  display: table;
}
.box-set:after {
  clear: both;
}
.box-set {
  *zoom: 1;
}
 
 

Демонстрация техники clearfix

Эффективное обуздание float

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

Одной распространённой практикой является присвоение класса родительскому элементу, который включает в себя float, нуждающиеся в обуздании. Техника clearfix, к примеру, помогла Дэну Седерхольму в виде шаблона класса с именем group. Название класса group затем может быть применено к любому родительскому элементу нуждающемуся в обуздании float.

.group:before,
.group:after {
  content: "";
  display: table;
}
.group:after {
  clear: both;
}
.group {
  *zoom: 1;
}
 

Одиночные псевдоэлементы

Стоит отметить, что для каждого элемента допускается только один псевдоэлемент :before и один :after за раз. При попытке использовать технику clearfix с другим :before и :after можно не получить желаемого результата.

В приведённых выше примерах стили clearfix не будут жить под классом box-set. Вместо этого должен быть добавлен класс group к родителю, содержащему обтекаемые элементы.

Свойство position

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

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

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

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

HTML

<div>
  <figure>Блок 1</figure>
  <figure>Блок 2</figure>
  <figure>Блок 3</figure>
  <figure>Блок 4</figure>
</div>

CSS

.box-set {
  background: #eaeaed;
}
.box {
  background: #2db34a;
  height: 80px;
  width: 80px;
}

Демонстрация статичного позиционирования

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

Значение relative для свойства position очень похоже на значение static. Основное отличие заключается в том, что relative принимает свойства смещения блока top, right, bottom и left. Эти свойства позволяют точно позиционировать элемент, сдвигая его из положения по умолчанию в любом направлении.

Как работают свойства смещения блока

Свойства смещения блока top, right, bottom и left указывают, как элементы могут быть позиционированы и в каком направлении. Эти свойства работают только для элементов со значениями relative, absolute или fixed у свойства position.

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

Для абсолютного или фиксированного позиционирования эти свойства определяют расстояние между элементом и краями родительского элемента. Например, использование значения 20px у top для абсолютно позиционируемого элемента будет толкать элемент на 20 пикселей вниз от верхнего края его относительно позиционированного родителя. Переключение значения top на -20px затем будет тянуть элемент на 20 пикселей вверх от верхнего края его относительно позиционированного родителя.

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

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

HTML

<div>
  <figure>Блок 1</figure>
  <figure>Блок 2</figure>
  <figure>Блок 3</figure>
  <figure>Блок 4</figure>
</div> 

CSS

.box-set {
  background: #eaeaed;
}
.box {
  background: #2db34a;
  height: 80px;
  position: relative;
  width: 80px;
}
.box-1 {
  top: 20px;
}
.box-2 {
  left: 40px;
}
.box-3 {
  bottom: -10px;
  right: 20px;
}

Демонстрация относительного позиционирования

В случае, если свойства смещения top и bottom заданы одновременно для относительно позиционированного элемента, свойство top будет иметь приоритет. Кроме того, если оба свойства смещения left и right заданы одновременно для относительно позиционированного элемента, приоритет отдаётся в направлении, на котором написан язык страницы. Например, для русских страниц отдаётся приоритет свойству смещения left, а для арабских страниц приоритет отдаётся свойству right.

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

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

Используя абсолютно позиционированные элементы и указав вертикальные и горизонтальные свойства смещения мы переместим элемент с этими значениями по отношению к его относительно позиционированному родителю. Например, элемент со значением top как 50px и right как 100px будет опущен вниз на 50 пикселей от верхнего края его относительно позиционированного родителя и сдвинут на 100 пикселей от правого края.

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

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

HTML

<div>
  <figure>Блок 1</figure>
  <figure>Блок 2</figure>
  <figure>Блок 3</figure>
  <figure>Блок 4</figure>
</div>

CSS

.box-set {
  background: #eaeaed;
  height: 200px;
  position: relative;
}
.box {
  background: #2db34a;
  height: 80px;
  position: absolute;
  width: 80px;
}
.box-1 {
  top: 6%;
  left: 2%;
}
.box-2 {
  top: 0;
  right: -40px;
}
.box-3 {
  bottom: -10px;
  right: 20px;
}
.box-4 {
  bottom: 0;
}

Демонстрация абсолютного позиционирования

Когда элемент содержит фиксированный height и width и он абсолютно позиционирован, свойство top имеет приоритет по сравнению с двумя объявленными свойствами смещения top и bottom. Как и в случае относительно позиционируемых элементов, для элемента с фиксированной шириной, у которого заданы сразу свойства left и right, приоритет отдаётся направлению, на котором написан язык страницы.

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

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

Значение fixed у позиционирования работает очень похоже на absolute, однако позиционирует относительно области просмотра браузера и не прокручивает вместе со страницей. Другими словами, элементы всегда будут присутствовать, независимо от того, где пользователь остановился на странице. Единственное предостережение про фиксированное позиционирование — оно не работает в Internet Explorer 6. Если вы хотите заставить фиксированное позиционирование работать в Internet Explorer 6 есть подходящие хаки.

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

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

HTML

<div>
  <figure>Блок 1</figure>
  <figure>Блок 2</figure>
  <figure>Блок 3</figure>
  <figure>Блок 4</figure>
</div>

CSS

.box {
  background: #2db34a;
  height: 80px;
  position: fixed;
  width: 80px;
}
.box-1 {
  top: 6%;
  left: 2%;
}
.box-2 {
  top: 0;
  right: -40px;
}
.box-3 {
  bottom: -10px;
  right: 20px;
}
.box-4 {
  bottom: 0;
}

Демонстрация фиксированного позиционирования

Фиксированная шапка или подвал

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

Код и демонстрация ниже показывает, как этого можно достичь. Обратите внимание, что объявлены оба свойства left и right. Это позволяет элементу <footer> охватить всю ширину нижней части страницы и он делает это не нарушая блочную модель, позволяя margin, border и padding применяться свободно.

HTML

<footer>Фиксированный подвал</footer>

CSS

body {
  background: #eaeaed;
}
footer {
  background: #2db34a;
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
}

Демонстрация фиксированного позиционирования

Свойство z-index

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

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

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

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

Поменяйте значения свойства z-index и обратите внимание, как элементы меняют свой порядок.

HTML

<div>
  <figure>Блок 1</figure>
  <figure>Блок 2</figure>
  <figure>Блок 3</figure>
  <figure>Блок 4</figure>
</div>

CSS

.box-set {
  background: #eaeaed;
  height: 160px;
  position: relative;
}
.box {
  background: #2db34a;
  border: 2px solid #ff7b29;
  position: absolute;
}
.box-1 {
  left: 10px;
  top: 10px;
}
.box-2 {
  bottom: 10px;
  left: 70px;
  z-index: 3;
}
.box-3 {
  left: 130px;
  top: 10px;
  z-index: 2;
}
.box-4 {
  bottom: 10px;
  left: 190px;
  z-index: 1;
}

Демонстрация z-index

Ресурсы и ссылки

Автор и редакторы

Автор: Шэй Хоу

Последнее изменение: 11.08.2018

Редакторы: Влад Мержевич

CSS позиционирование блоков

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

Основной поток документа

Вы уже знаете правила, в соответствии с которыми элементы располагаются на странице. Они идут друг за другом в том порядке, в котором они находятся в коде страницы. Блоковые начинаются с новой строки, а строчные располагаются в строке. Элементы, которые подчиняются этим приавилам, находятся в основном потоке документа. Этот термин возник потому, что существуют элементы, которые размещаются на странице совсем по-другому. Для этого элементу должно быть установлено позиционирование. При этом, он удаляется из основного потока документа. Остальные элементы занимают его место так, как будто его вообще нет. Иногда можно встретить информацию, что элементы, которым установлено свойство float, тоже удаляются из основного потока. Но это не совсем правильно, потому что строковые элементы не занимают их место.

Виды позиционирования

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

Существуют следующие виды позициционирования блоков:

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

Относительное позиционирование. При этом виде позиционирования элемент смещается относительно того места, которое он занимал в основном потоке документа. Другие элементы не занимают место элемента в основном потоке. Оно остаётся пустым, если его не перекроют позиционированные элементы.

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

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

Позиционирование устанавливает свойство position. Оно принимает значения:

position: absolute; — абсолютное

position: relative; — относительное

position: fixed; — фиксированное

position: static; — статическое

Для указания координат используются свойства:

left — смещение левого края элемента относительно левой границы окна браузера или внешнего блока.

right — смещение правого края элемента относительно правой границы окна браузера или внешнего блока.

top — смещение верхнего края элемента относительно верхней границы окна браузера или внешнего блока.

bottom — смещение нижнего края элемента относительно нижней границы окна браузера или внешнего блока.

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

left: auto; — без смещения (по умолчанию)

left: величина в единицах измерения CSS

left: величина в процентах. Если элемент смещается относительно окна браузера, то проценты расчитываются от размеров окна браузера. А если елемент смещается относительно внешнего блока, то проценты расчитываются от размеров блока.

left: inherit; — значение принимается от родительского элемента

У остальных свойств значения указываются так же, как у left.

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

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

Стиль:

+

7 8 9 10 11 12 13 14 15 16

div { background-color: #909090; } .stream { background-color: Blue; width: 100px; margin-bottom: 2px; }

HTML код:

20 21

<div></div> <div></div>

Теперь добавим на страницу блок с абсолютным позиционированием. Укажем координаты слева и сверху:

Стиль:

17 18 19 20 21 22

#absleft { position: absolute; left: 40px; top: 20px; }

HTML код:

28 29

<div>Абсолютное позиционирование<br> слева сверху</div>

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

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

Стиль:

23 24 25 26 27 28

#absright { position: absolute; right: 10px; bottom: 60px; }

HTML код:

36 37

<div>Абсолютное позиционирование<br> справа снизу</div>

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

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

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

Стиль:

29 30 31 32 33 34 35

#relleft { position: relative; left: 120px; top: 10px; width: 300px; }

HTML код:

40 41

<div>Относительное позиционирование<br> слева сверху</div>

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

Стиль:

36 37 38 39 40 41

#absblock { position: absolute; left: 5px; bottom: 48px; }

HTML код:

46 47 48 49 50

<div>Относительное позиционирование<br> слева сверху <div>Абсолютное позиционирование<br> относительно блока</div> </div>

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

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

ВАЖНО: По умолчанию, элементы в основном потоке располагаются не возле самого края окна браузера, а с некоторым отступом. У всех браузеров этот отступ разный. Из за этого невозможно точно разместить блок относительно элементов в основном потоке, потому что координаты элементов в разных браузерах не совпадают. Для решения этой проблемы какому-нибудь блоку устанавливается относительное позиционирование без смещения. И нужные блоки позиционируются относительно него. Так расположение позиционированных блоков относительно элементов основного потока получается во всех браузерах одинаковым.

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

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

Стиль:

42 43 44 45 46 47

#fix { position: fixed; left: 400px; top: 10px; }

HTML код:

62	<div>Фиксированное позиционирование</div>

Попробуйте прокрутить страницу, Вы увидите, что фиксированный элемент остаётся на месте.

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

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

Фиксированный дизайн. Позиционирование | htmlbook.ru

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

Координаты слоя

Положение слоя в документе зависит от заданных значений стилевых свойств left, top, right и bottom, они устанавливают соответственно позицию слоя слева, сверху, справа и снизу. Точка отсчета определяется в зависимости от свойства position, которое принимает обычно значение relative (относительное положение) или absolute (абсолютное положение).

При абсолютном позиционировании слой располагается относительно родительского элемента или окна браузера, если родитель не задан, как показано на рис. 1.

Рис. 1. Положение слоя относительно окна браузера

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

Рис. 2. Положение слоя относительно исходного положения

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

Заметим, что указание свойства position без упоминания координат (значений left, top, right или bottom) не меняет положение текущего слоя, но оказывает влияние на расположение близлежащих или вложенных слоев.

Размещение двух слоев

При размещении двух слоев рядом по горизонтали, левому слою необходимо задать абсолютное положение, а правому — относительное (пример 1). Это наиболее универсальный подход, который гарантирует, что слои будут позиционированы правильно относительно друг друга и окна браузера. При этом не имеет значения, как будет располагаться макет — по левому краю или по центру окна — слои не изменят своего положения. Обязательно следует сместить правый слой (в примере он называется rightcol) по горизонтали с помощью свойства left на величину, равную ширине левого слоя. В противном случае слои будут накладываться друг на друга.

Пример 1. Размещение двух слоев

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Позиционирование</title>
  <style type="text/css"> 
   #leftcol {
    position: absolute; /* Абсолютное позиционирование */
    width: 200px; /* Ширина слоя  */
    background: #800000; /* Цвет фона */
    color: white;  /* Цвет текста */ 
   }
   #rightcol {
    position: relative; /* Относительное позиционирование */
    left: 200px; /* Смещаем слой вправо на ширину левого слоя */
    width: 550px; /* Ширина слоя */
    background: #e0e0e0; /* Цвет фона */
    padding: 10px; /* Поля вокруг текста */
   }
  </style>
 </head>
 <body>
  <div>Левая колонка</div>
  <div>Правая колонка </div>
 </body>
</html>

Несмотря на простоту решения, в данном случае следует учесть несколько моментов.

• Использование position: absolute для левой колонки, хотя и не дает видимого результата, необходимо для того, чтобы правая колонка не «перескакивала» вниз, и слои располагались на одном уровне.
• Положение правого слоя rightcol зависит от значения стилевого свойства left, оно в данном случае должно равняться ширине левого слоя, в этом случае слои будут плотно прилегать между собой. Впрочем, ничего не мешает изменять этот параметр в ту или иную сторону. Тогда между слоями появится разделительная полоса или наоборот, слои станут накладываться друг на друга.
• Свойство padding, добавляющее поля вокруг текста, если его использовать в стиле левого слоя leftcol, вносит искажения в макет страницы для браузера. Это связано с тем, что ширина элемента в браузере складывается из значений width, padding и margin. Поскольку добавление полей увеличивает ширину слоя, то правая колонка начинает накладываться поверх левой колонки. Чтобы устранить эту особенность, атрибут padding следует применить к стилю абзаца, который должен располагаться внутри слоя или изменить значение width. Также можно добавить еще один внутренний слой и указать поля для него (пример 2).

Пример 2. Поля внутри слоя

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Позиционирование</title>
  <style type="text/css"> 
   #leftcol {
    position: absolute; width: 200px; background: #800000; color: white; 
   }
   #leftcol div {
    padding: 10px; /* Поля вокруг текста в левой колонке */
   }
   #rightcol {
    position: relative; left: 200px; width: 550px; background: #e0e0e0;
   }
   #rightcol div {
    padding: 10px; /* Поля вокруг текста в правой колонке */
   }
  </style>
 </head>
 <body>
  <div>
    <div>Левая колонка</div>
  </div>
  <div>
    <div>Правая колонка</div>
  </div>
 </body>
</html>

Резюме

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

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