Position в css

Содержание:

Строчные (линейные) элементы
position: relative
Относительное позиционирование
Понимание «липкого» поведения
Залипает внизу?!
Браузерная поддержка
В заключении
position: absolute;
- Example
Типы позиционирования в CSS
Есть два типа позиционирования
CSS — Выравнивание блока по центру
Относительное позиционирование
Абсолютное позиционирование
Поддержка браузерами
Относительное позиционирование
Фиксированное положение
Позиционирование через inline-block

Строчные (линейные) элементы

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

В CSS существует два типа элементов:

блочные
строчные / линейные (inline)

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

), элементы списков (HTML тег
), абзацы (HTML тег
) и так далее

Что касается строчных (inline) элементов, то они не создают разрывов строк перед элементами и после них, а отображаются в одной строке с содержимым. Например, вы форматируете слово из предложения элементом <b> (определяет жирное начертание текста), то это слово по-прежнему будет располагаться на одной строке с текстом, который, заключен в блочный элемент <p> (абзац).

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

Давайте рассмотрим пример:

<!DOCTYPE html>
<html>
<head>
	<title>Пример указания внешних и внутренних отступов для строчных элементов</title>
<style> 
b {
margin: 50px; /* устанавливаем внешние отступы для всех сторон 50px */
padding: 50px; /* устанавливаем внутренние отступы для всех сторон 50px */
}
</style>
</head>
	<body>
		<p class = "primer1">Хорошо <b>живёт</b> на свете Винни Пух.</p>
		<p>От того поёт он эти песни вслух.</p>
	</body>
</html>

Мы добавили внутренние и внешние отступы со всех сторон по 50px, установили границу и задний фон к строчному элементу. Что мы видим в результате:

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

Результат нашего примера:

Рис. 80 Пример указания внешних и внутренних отступов для строчных элементов.

Но как говорится на каждую хитрую строку найдется свой display : inline-block:

<!DOCTYPE html>
<html>
<head>
	<title>Пример указания внешних и внутренних отступов для блочно-строчных элементов</title>
<style> 
b {
display: inline-block; /* устанавливаем, что элементы выстраиваются в линейку (становятся блочно-строчные) */
margin: 50px; /* устанавливаем внешние отступы для всех сторон 50px */
padding: 50px; /* устанавливаем внутренние отступы для всех сторон 50px */
background-color: khaki; /* устанавливаем цвет заднего фона */
border: 1px solid; /* устанавливаем сплошную границу размером 1 пиксель (черный цвет по умолчанию)  */
}
</style>
</head>
	<body>
		<p>Хорошо <b>живёт</b> на свете Винни Пух.</p>
		<p>От того поёт он эти песни вслух.</p>
	</body>
</html>

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

Результат нашего примера:

Рис. 81 Пример указания внешних и внутренних отступов для блочно-строчных элементов.

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

Чтобы установить, что элемент будет восприниматься браузером как строчный, то необходимо использовать следующее объявление:

селектор {
display: inline;
}

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

селектор {
display: block;
}

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

position: relative

Css макет — свойство position

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

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

Этот стиль сдвинет элемент на 10 пикселей относительно обычной позиции по вертикали:

Для сдвига можно использовать координаты:

– сдвиг от «обычной» верхней границы
– сдвиг от нижней границы
– сдвиг слева
– сдвиг справа

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

Возможны отрицательные координаты и координаты, использующие другие единицы измерения. Например, сдвинет элемент на 10% его ширины вправо, а – влево. При этом часть элемента может оказаться за границей окна:

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

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

Как выровнять по центру в css

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

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      h2 {
		position: relative;
		top: 30px;
	  }
    </style>
  </head>

  <body>
    <h1>Заголовок первого уровня.</h1>
	<h2>Относительно позиционированный заголовок.</h2>
	<h3>Заголовок третьего уровня.</h3>
  </body>
</html>

Попробовать »

Примечание: элементы с относительным позиционированием () обычно используют в качестве родителя для элементов с абсолютным позиционированием ().

Понимание «липкого» поведения

Vertical-align

Как я и говорил, ведёт себя не так, как другие типы позиционирования. Но, с другой стороны, у них есть определённые сходства. Позвольте мне пояснить:

Относительное (или статичное) — «липкий» элемент похож на элемент со статическим или относительным позиционированием поскольку сохраняет свою естественную позицию в DOM (остаётся в потоке). Фиксированное—когда элемент залипает, то ведёт себя как будто у него заданы стили , остаётся на той же позиции в области видимости и вырывается из потока документа.Абсолютное—в конце доступной для перемещений области элемент останавливается и остаётся поверх другого элемента. Точно также, как ведёт себя абсолютно спозиционированный элемент в контейнере с .

Залипает внизу?!

В большинстве случаев вы будете использовать чтобы прикрепить элемент к верхнему краю страницы. Что-то вроде этого:

.component {  position: sticky;  top: 0;}

Именно для таких сценариев и был создан этот тип позиционирования. До его появления такой трюк приходилось проворачивать с помощью JavaScript.

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

Полный пример:

HTML

<main class="main-container">  <header class="main-header">HEADER</header>  <div class="main-content">MAIN CONTENT</div>  <footer class="main-footer">FOOTER</footer></main>

CSS

.main-footer {       position: sticky;   bottom: 0;}

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

Браузерная поддержка

«Липкое» позиционирование поддерживается всеми основными современными браузерами. Исключение: старый-добрый IE.
Для Safari потребуется префикс

position: -webkit-sticky; /* Safari */  position: sticky;

Более 86% браузеров поддерживает sticky по данным

В заключении

Вот и всё. Я надеюсь, что вам понравилась эта статья и мне удалось поделиться своим опытом. Я буду признателен, если вы поделитесь этим постом и поаплодируйте.

position: absolute;

An element with is positioned relative to the nearest positioned ancestor
(instead of positioned relative to the viewport, like fixed).

However; if an absolute positioned element has no positioned ancestors,
it uses the document body, and moves along with page scrolling.

Note: A «positioned» element is one whose position is anything except
.

Here is a simple example:

This <div> element has position: relative;

Here is the CSS that is used:

Example

div.relative { position: relative;
width: 400px; height: 200px; border: 3px solid #73AD21;}

div.absolute { position: absolute;
top: 80px; right: 0; width: 200px; height: 100px; border: 3px solid #73AD21;}

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

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

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

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

relative;
absolute;
inherit;
fixed;
static.

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

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

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

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

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

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

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

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

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

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

position: absoluteposition: 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, применяя позиционирование лишь для тех элементов, которые необходимо выделить из общего потока.

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

Есть два типа позиционирования

Позиционирование статического (static) типа и относительного (relative).

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

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

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

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

.ourBox {
  position: static;
}

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

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

С относительным позиционированием вещи становятся куда интереснее.

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

Каждое позиционирование относительного типа может:

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

Давайте рассмотрим поближе каждое из трёх относительных позиционирований.

Значение Relative

Возможно вы видели это раньше. Код выглядит следующим образом:

.ourBox {
  position: relative;
}

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

Внесём ясность. Когда вы используете свойства смещения для элемента со свойством , то место, которое он занимает в документе, не смещается.

Посмотрите на пример ниже.

.ourBox {
  position: relative;
  top: 20px;
  left: 20px;
}

Наш элемент сдвинут со своей оригинальной позиции с помощью свойств смещения.

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

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

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

Значение Absolute

Закрепление.

Свойство в основном делает то же самое, что и свойство , но с двумя ключевыми отличиями:

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

Давайте посмотрим:

.ourBoxesParent {
  position: relative;
}
.ourBox {
  position: absolute;
  top: 0;
  left: 0;
}

Мы забираем нашу коробку из нормального потока и сдвигаем её относительно ближайшего родительского элемента со свойством relative.

Мы создали оболочку со свойством для трёх наших коробок. Также мы изменили свойство нашей коробки на

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

Значение Fixed

Теперь, когда мы знаем о свойстве , то нам будем проще разобраться с .

представляет из себя то же самое, что и , но с одной ключевой разницей:

Элемент позиционируется относительно окна просмотра.

.ourBox {
  position: fixed;  
  top: 0;
  left: 0;
}

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

Шпаргалка

Для быстрой справки подытожим всё, что мы узнали.

Свойство по умолчанию для всех элементов.
Размещает элементы в обычном потоке.

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

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

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

Перевод статьи Jacob GreenawayUnderstanding Position in CSS

CSS — Выравнивание блока по центру

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

HTML-код:

<div class="parent">
  ...
  <div class="child">
    ...
  </div>
</div>

CSS-код:

.parent {
  position: relative;
}
.child {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

Браузеры, которые поддерживают данное решение:

Chrome 4.0+
Firefox 3.6+
Internet Explorer 9+
Opera 10.5+
Safari 3.1+

2. Выравнивание одного блока по центру другого. При этом второй блок имеет фиксированные размеры.

.parent {
  position: relative;
}
.child {
  position: absolute;
  left: 50%;
  top: 50%;
  /* ширина и высота 2 блока */
  width: 500px;  
  height: 250px;
  /* Значения определяются в зависимости от его размера */
  /* margin-left = - width / 2 */
  margin-left: -250px;
  /* margin-top = - height / 2 */
  margin-top: -125px;
}

Браузеры, которые поддерживают данное решение:

Chrome 1.0+
Firefox 1.0+
Internet Explorer 4.0+
Opera 7.0+
Safari 1.0+

3. Выравнивание одного блока по центру другого. При этом второй блок имеет размеры, заданные в процентах.

.parent {
  position: relative;
}
.child {
  position: absolute;
  /* ширина и высота 2 блока в % */
  height: 50%;
  width: 50%;
  /* Значения определяются в зависимости от его размера в % */
  left: 25%; /* (100% - width) / 2 */
  top: 25%;  /* (100% - height) / 2 */
}

Браузеры, которые поддерживают данное решение:

Chrome 1.0+
Firefox 1.0+
Internet Explorer 4.0+
Opera 7.0+
Safari 1.0+

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

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

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

С использованием свойств positionrelative, top и left:

<head>

<title>Relativetitle>

div {

width: 640px;

height: 240px;

position: relative;

}

#redBox {

background-color: red;

top: 10px;

left: 10px;

}

#greenBox {

background-color: green;

top: 70px;

left: 70px;

}

#blueBox {

background-color: blue;

top: 130px;

left: 130px;

}

style>

head>

<body>

body>

html>

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

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

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

Координаты означают расстояние бокса от краев: означает, что бокс прижат к верхнему краю, — что отстоит на 10 пикселов от правого края и т.д. Любая из координат необязательна. В случае, если координаты не задают вертикального или горизонтального положения, то оно остается таким же, какое было бы без позиционирования. То есть в случае, когда у нас есть два произвольных бокса один за другим «box1» и «box2»:

… и второй мы позиционируем так:

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

Стакан

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

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

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

Используя более принятые в CSS термины, этот стакан называется «содержащим блоком» (containing block).

Fixed

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

С fixed-боксами связан один среднеинтересный момент. Для обычных абсолютных боксов браузер всегда сделает достаточно скроллбаров, чтобы их можно было просмотреть. А вот если фиксированный бокс не влезет в окно, то доскролиться до него будет уже нельзя.

Автоматические размеры

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

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

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

Засада

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

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

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

Здесь видны две проблемы:

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

Поддержка браузерами

Свойство position работает во всех основных браузерах: Chrome, Firefox, Safari, Opera, Internet Explorer, а также на Android и iOS.

Но поддержка значений fixed и sticky различается среди браузеров. Вот таблицы совместимости для этих двух значений:

<iframe src="http://caniuse.com/css-fixed/embed/" width="650" height="340" align="left" scrolling="no"> </iframe>

В Internet Explorer фиксированное позиционирование в CSS не работает, если документ находится в режиме совместимости:

<iframe src="http://caniuse.com/css-sticky/embed/" width="650" height="340" align="left" scrolling="no"> </iframe>

«Прилипающее» позиционирование будет работать в Firefox 26 (Gecko 26) только если для параметра layout.css.sticky.enabled в about:config задано значение true.

Значения center и page в настоящее время не поддерживаются ни одним браузером.

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

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

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

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

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

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

Напишем ему:

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

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

Фиксированное положение

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

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

С использованием свойств positionfixed, top и left:

<html>

<head>

<title>Fixedtitle>

div {

width: 240px;

height: 240px;

}

#redBox {

background-color: red;

}

#greenBox {

background-color: green;

}

#blueBox {

background-color: blue;

}

#fixedBox {

background-color: cyan;

width: 200px;

height: 200px;

border-radius: 100px;

position: fixed;

top: 20px;

left: 150px;

opacity: 1.0;

}

style>

head>

<body>

body>

html>

Позиционирование через inline-block

В дополнение к использованию float, ещё один способ, которым мы можем позиционировать контент — это применение свойства display в сочетании со значением inline-block. Метод с inline-block, как мы ещё обсудим, в первую очередь полезен для компоновки страниц или для размещения элементов в линию рядом друг с другом.

Напомним, что значение inline-block для свойства display отображает элементы в линию и позволяет им принимать все свойства блочной модели, включая height, width, padding, border и margin. Применение inline-block позволяет нам в полной мере воспользоваться блочной моделью, не беспокоясь об очистке каких-либо float.

inline-block на практике

Давайте взглянем на наш трёхколоночный пример с самого начала. Начнём мы, сохраняя наш HTML таким:

Теперь вместо float для наших трёх элементов <section> мы изменим у них значение display на inline-block, оставляя свойства margin и width те, что были ранее. В результате наш CSS будет выглядеть следующим образом:

К сожалению, одного этого кода недостаточно чтобы сделать трюк и последний элемент <section> выталкивается на новую строку. Помните, поскольку строчно-блочные элементы отображаются на одной линии друг за другом, они включают единое пространство между ними. Когда размер каждого отдельного пространства добавляется к ширине и значению горизонтального margin всех элементов в строке, общая ширина становится слишком большой, выталкивая последний элемент <section> на новую строку. Чтобы отобразить все элементы <section> на одной строке, следует удалить пустое пространство между каждым <section>.

Удаление пространства между строчно-блочными элементами

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

Первое решение — это поместить каждый новый открывающий тег элемента <section> в той же строке, что и закрывающий тег предыдущего элемента <section>. Вместо использования новой строки для каждого элемента мы в итоге начинаем элементы с той же строки. Наш HTML может выглядеть следующим образом:

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

Демонстрация элементов inline-block без пробелов

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

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