Какие бывают значения у свойства position. CSS Position: примеры. Две колонки с фиксированной высотой
Позиционирование задаётся с помощью свойства position . Свойство может иметь четыре значения, которые мы и рассмотрим.
Абсолютное позиционирование
Абсолютное позиционирование задается так:
Position: absolute
После этого блок теряет свои привычные свойства и полностью выпадает из потока. Что представляет собой поток в данном контексте? Попробуйте расположить в разметке несколько блочных элементов подряд. Они будут идти друг за другом. Это стандартное поведение блоков по умолчанию. Если блоку присвоить абсолютное позиционирование, то он полностью выпадает из потока, другие блоки просто перестают замечать его, но при этом элемент остается на странице. Абсолютное позиционирование часто применяется для точной расстановки отдельных элементов.
Теперь его можно перемещать с помощью свойств left , right , top и bottom . По умолчанию перемещение происходит относительно сторон окна браузера, но если у родительского элемента задано position: relative , то смещение происходит относительно родительского блока.
Block{ position: absolute; bottom: 0; right: 0; background: gray; }
Элемент с классом block будет сдвинут в нижний правый угол браузера.
Рассмотрим пример, когда блок находится внутри родительского элемента.
Блок внутри родительского элемента
Мы сначала родительскому контейнеру записали относительное позиционирование (relative ), а для элемента block задали абсолютное. В результате отсчет координат будет происходить не от самого окна браузера, а от краев элемента родителя, то есть блока wrapper .
Относительное позиционирование
Относительное позиционирование записывается так – position: relative . Координаты задаются такими же свойствами, как и при абсолютном позиционировании. Единственное существенное отличие заключается в том, что элемент формально не выпадает из потока – под него остается место.
Работу этого значения можно сравнить с visibility: hidden , когда элемент скрывается со страницы, но место под него остается нетронутым. Блок можно двигать куда угодно, но место под него остается пустым и его не займут другие части. Сдвинуть блок можно с помощью свойств top , left и так далее.
Помните, что смещение происходит не от краев окна браузера, а от того места, где изначально стоял блок.
Стандартный блок
Стандартный блок
Блок подвинется на 50 пикселей вправо и на 10 вверх. Но его место осталось нетронутым.
Стандартный блок
Как видите, можно задавать и отрицательные значения.
Фиксированное позиционирование
Распространённый вариант, когда при прокрутке элемент словно приклеивался к одному месту. Например, часто используется в шапке сайта. В основном это реализуется с помощью фиксированного позиционирования. Для этого нужно записать:
Block{ position: fixed; }
По поведению фиксированное смещение схоже с абсолютным – элемент выпадает из нормального потока, его место освобождается и другие элементы вообще его не замечают. С помощью такого приема можно очень легко сделать верхние, нижние, боковые панели на своем сайте, которые не будут исчезать при прокрутке и всегда находиться на виду.
Статическое позиционирование
Последний вид – статическое позиционирование, это обычное поведение блочный элементов. Его не нужно прописывать, потому что оно стоит по умолчанию. Но иногда position: static используют, чтобы отменить другой вид позиционирования при определенных событиях на веб-странице в сценариях JavaScript.
Для вёрстки страниц часто используются два основных инструмента — позиционирование (positioning) и свободное перемещение (floating) . CSS-позиционирование позволяет указать, где появится блок элемента, а свободное перемещение перемещает элементы к левому или правому краю блока-контейнера, позволяя остальному содержимому «обтекать» его.
Позиционирование и свободное перемещение элементов
1. Типы позиционирования
Свойство position позволяет точно задать новое местоположение блока относительно того места, где он находился бы в нормальном потоке документа. По умолчанию все элементы располагаются последовательно один за другим в том порядке, в котором они определены в структуре HTML-документа. Свойство не наследуется.
| position | |
|---|---|
| Значение: | |
| static | Значение по умолчанию, означает отсутствие позиционирования. Элементы отображаются последовательно один за другим в том порядке, в котором они определены в HTML-документе. Используется для очистки любого другого значения позиционирования. |
| relative | Относительно позиционированный элемент сдвигается со своего обычного места в разных направлениях относительно границ родительского контейнера, а пространство, которое он занимал, не исчезает. При этом такой элемент может перекрывать другое содержимое на странице.
Если для относительно позиционированного элемента одновременно задать свойства top и bottom или left и right , то в первом случае сработает только top , во втором — left . Относительное позиционирование позволяет задавать z-index для элемента, а также абсолютно позиционировать дочерние элементы внутри блока. |
| absolute | Абсолютно позиционированный элемент полностью удаляется из потока документа и позиционируется относительно границ его блока-контейнера (другого элемента или окна браузера). Блок-контейнер для абсолютно позиционированного элемента — ближайший элемент-предок, значение свойства position которого не равно static .
Местоположение краёв элемента определяется с помощью свойств смещения. Пространство, которое занимал такой элемент, схлопывается, как будто элемента не существовало на странице. Абсолютно позиционированный элемент может перекрывать другие элементы или быть перекрытым ими (за счёт свойства z-index). Любой абсолютно позиционированный элемент генерирует блок, то есть принимает значение display: block; . |
| fixed | Фиксирует элемент в указанном месте страницы. Блоком-контейнером фиксированного элемента является окно просмотра, то есть элемент всегда фиксируется относительно окна браузера и не меняет своего положения во время прокрутки страницы. Сам элемент при этом полностью удаляется из основного потока документа и создаётся в новом потоке документа. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Рис. 1. Разница между статичным, относительным и абсолютным позиционированием
2. Свойства смещения
Свойства описывают смещение относительно ближайшей стороны блока-контейнера. Задаются для элементов, для которых значение свойства position не равно static . Могут принимать как положительные, так и отрицательные значения. Не наследуются.
Для свойства top положительные значения перемещают верхний край позиционируемого элемента ниже, а отрицательные — выше верхнего края его блока-контейнера. Для свойства left положительные значения сдвигают край позиционируемого элемента вправо, а отрицательные значения — влево. То есть, положительные значения смещают элемент внутрь блока-контейнера, а отрицательные — за его пределы.
3. Позиционирование внутри элемента
Для блока-контейнера абсолютно позиционированного элемента задаётся свойство position: relative без смещений. Это позволяет позиционировать элементы внутри элемента-контейнера.
Рис. 2. Абсолютное относительное позиционирование
4. Проблемы позиционирования
1. Если ширине или высоте абсолютно позиционированного элемента присвоено значение auto , то её значение будет определяться шириной или высотой содержимого элемента. Если ширина или высота объявлена явно, то именно это значение и будет присвоено.
2. Если внутри блока с position: absolute расположены элементы, для которых задано обтекание float , то высота этого элемента будет равна высоте самого высокого из этих элементов.
3. Для элемента с position: absolute или position: fixed нельзя одновременно устанавливать свойство float , а для элемента с position: relative — можно.
4. Если предок позиционированного элемента является блочным элементом, то блок-контейнер формируется областью содержимого, ограниченной рамкой (border). Если предок — строковый элемент, блок-контейнер формируется внешней границей его содержимого. Если предка нет, блоком-контейнером является элемент body .
5. Свободное перемещение элементов
В обычном порядке блочные элементы отображаются, начиная с верхнего края окна браузера по направлению к нижнему краю. Свойство float позволяет перемещать любой элемент, выравнивая его по левому или правому краю веб-страницы или содержащего его элемента-контейнера. При этом остальные блочные элементы будут его игнорировать, а строчные элементы будут смещаться вправо или влево, освобождая для него пространство и обтекая его.
Рис. 3. Свободное перемещение элементов
Плавающий блок принимает размеры своего содержимого с учетом внутренних отступов и рамок. Верхние и нижние отступы margin плавающих элементов не схлопываются. Свойство float применяется как к блочным элементам, так и к строчным элементам.
Левый или правый внешний край перемещаемого элемента, в отличие от позиционированных элементов, не может располагаться левее (или правее) внутреннего края его блока-контейнера, т.е. выходить за его границы. При этом, если для блока-контейнера заданы внутренние отступы, то плавающий блок будет отстоят от края блока-контейнера на заданное расстояние.
Свойство автоматически изменяет вычисляемое (отображаемое в браузере) значение свойства display на display: block для следующих значений: inline , inline-block , table-row , table-row-group , table-column , table-column-group , table-cell , table-caption , table-header-group , table-footer-group . Значение inline-table меняет на table .
Свойство не оказывает никакого влияния на элементы с display: flex и display: inline-flex .
При использовании свойства float для блочных элементов обязательно задавать ширину. Тем самым браузер создаст место для другого содержимого. Но если совокупная ширина всех столбцов окажется больше доступного места, то последний элемент спустится вниз.
При этом вертикальные отступы margin обтекаемых элементов не схлопываются с отступами соседних элементов, в отличие от обычных блочных элементов.
6. Отмена обтекания элементов
6.1. Свойство clear
Свойство clear определяет, как будет располагаться элемент, идущий следом за плавающим элементом. Свойство отменяет обтекание с одной или обоих сторон элемента, установленное свойством float . Для предотвращения отображение фона или границ под плавающими элементами используется правило {overflow: hidden;} .
6.2. Очистка потока стилями при помощи класса clearfix и псевдокласса:after
Предположим, имеется блок-контейнер, для которого не заданы ширина и высота. Внутри него помещен плавающий блок с заданными размерами.
Рис. 4. «Эффект схлопывания» блока-контейнера
Решение проблемы:
Создаем класс.clearfix и в сочетании с псевдоклассом:after применяем его к блоку-контейнеру.
Второй вариант очистки потока:
Clearfix:after {
content: "";
display: table;
clear: both;
}
Рис. 5. Применение «очищающего» метода для блока-контейнера, содержащего плавающий элемент
6.3. Легкий способ очистки потока
Существует ещё один прием очистки потока для элемента, содержащего плавающие элементы, например, для маркированного горизонтального списка:
Ul { margin: 0; list-style: none; padding: 20px; background: #e7e6d4; overflow: auto; } li { float: left; width: calc(100% / 3 - 20px); height: 50px; margin-right: 20px; background: #ffffff; border: 3px dashed #666666; } li:last-child {margin-right: 0;} Рис. 6. Очистка потока горизонтального списка
Свойство position - это универсальное и мощное свойство. Оно позволяет установить или изменить положение элемента и содержит четыре возможных значения :
- static (значение по умолчанию)
- relative
- absolute
- fixed
Часто используется наряду с четырьмя свойствами координат:
- left
- right
- bottom
static
Это значение position по умолчанию : статичные элементы просто следуют естественному потоку . Любые значения left , right , top или bottom не оказывают влияния.
relative
Когда position установлено относительно , элемент может перемещаться относительно его текущей позиции .
Едва мы спрятали лодку, Джа увлёк меня в джунгли, и вскоре мы вышли на узкую, хорошо утоптанную тропу.
Я ринулся вверх, пытаясь в последнем усилии дотянуться до руки Джа, но ситик с такой силой рванул копьё на себя, что оно вырвалось из рук мезопа, едва не сорвавшегося со скалы, а я, всё ещё цепляясь за древко, полетел вниз, прямо в раскрытую пасть зверюги.
Он уже перешёл на бег, замахиваясь на ходу тяжёлым копьём.
P { border: 1px solid blue; }
Давайте переместим второй абзац:
Second { position: relative; border-color: red; left: 20px; top: 10px; }
Красный абзац переместился на 20px слева направо и на 10px сверху вниз относительно его естественного положения, где он полагался быть.
Обратите внимание, что синие абзацы не сдвинулись вообще. При использовании относительного позиционирования, красный абзац может свободно перемещаться, не нарушая макет. Единственное, что сдвигается со своего места, так это сам элемент. Все остальные элементы не знают, что элемент переместился .
absolute
Когда position устанавливается абсолютно , элемент может перемещаться относительно первого позиционированного предка .
Позиционированного? Что такое позиционированный элемент?
Позиционированный элемент - это тот, у которого значение position установлено как relative , absolute или fixed . Таким образом, если положение не задано статичным, то элемент позиционированный .
Характеристикой позиционированного элемента является то, что он может выступать в качестве точки отсчёта для своих дочерних элементов .
Давайте представим простую иерархию:
Я позиционирован абсолютно!
Section {
background: gold;
height: 200px;
padding: 10px;
position: relative; /* Превращает */
}
p {
background: limegreen;
color: white;
padding: 10px;
position: absolute; /* Делает Свободно перемещаемым */
bottom: 10px; /* 10px снизу */
left: 20px; /* 20px слева */
}
Жёлтый раздел имеет высоту 200px, а позиционирование задано как relative
, что превращает его в точку отсчёта для всех дочерних элементов
. Зелёный абзац позиционирован как absolute
и может свободно перемещаться относительно
жёлтого раздела. Установив оба значения left
и bottom
, мы переместим
его в левый нижний угол. Что произойдёт, если мы одновременно установим left
и right
? Если ширина не задана, применение left: 0
и right: 0
растягивает элемент на всю ширину
. Это эквивалент установки left: 0
и width: 100%
. Если ширина установлена, то значение right
отбрасывается. Когда position
задано как fixed
, оно действует как абсолютное
: вы можете установить координаты слева/справа и сверху/снизу. Единственное отличие состоит в том, что точкой отсчёта является окно просмотра
. Это означает, что фиксированный элемент не перемещается
со страницей, он фиксируется
на экране. И left , они позволяют произвести смещение позиционированного элемента относительно определенного края. Ниже в примере рассмотрены возможные типы позиционирования элемента: Более подробную информацию о позиционировании элементов вы можете получить в учебнике CSS в статье .
CSS синтаксис: JavaScript синтаксис: Object.style.position = "absolute"
В этом примере для демонстрации рассмотрены все возможные типы позиционирования - статический, относительный, абсолютный и фиксированный. Результат нашего примера. Позиционирование — одно из ключевых понятий в блочной верстке. Разобравшись с ним, вам многое станет понятно, а верстка из шаманства превратится в осмысленный процесс. Итак, речь в статье пойдет о CSS-свойствах position
и float
. По умолчанию все элементы на странице имеют статическое позиционирование (position: static), это означает, что элемент не позиционирован, и появляется в документе на своем обычном месте, то есть в том же порядке, как и в html-разметке. Нет необходимости специально назначать это свойство какому-либо элементу, если только вам не требуется изменить ранее установленное позиционирование на дефолтное.
#content{
position: static;
}
Относительное позиционирование (position: relative) позволяет вам использовать свойства: top, bottom, left и right, для расположения элемента относительно того места, где бы он появился при обычном позиционировании. Давайте переместим #content на 20 пикселей вниз, и на 40 пикселей влево:
#content{
position: relative;
top: 20px;
left: -40px;
}
Обратите внимание, что на том месте, где бы должен был находится наш блок #content, теперь образовалось пустое пространство. Следующий за блоком #content, блок #footer не переместился ниже, потому что, #content по-прежнему занимает свое место в документе, несмотря на то, что мы передвинули его. На данном этапе может показаться, что относительное позиционирование не так уж и полезно, но, не спешите с выводами, далее в статье, вы узнаете, для чего его можно использовать. При абсолютном позиционировании (position: absolute), элемент удаляется из документа, и появляется там, где вы ему скажете. Давайте, для примера, переместим блок #div-1a в верхний, правый угол страницы:
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
Обратите внимание, что на этот раз, поскольку блок #div-1a был удален из документа, оставшиеся элементы на странице расположились по-другому: #div-1b, #div-1c и #footer переместились выше, на место удаленного блока. А сам блок #div-1a, расположился точно в правом, верхнему углу страницы. Таким образом, мы можем позиционировать любой элемент относительно страницы, однако этого не достаточно. На самом деле, нам необходимо позиционировать #div-1a относительно родительского блока #content. И на этом этапе, относительное позиционирование вновь вступает в игру. Фиксированное позиционирование (position: fixed), является подразделом абсолютного позиционирования. Единственное его отличие в том, что он всегда находится в видимой области экрана, и не двигается во время прокрутки страницы. В этом отношении, он немного похож на фиксированное фоновое изображение.
#div-1a {
position:fixed;
top:0;
right:0;
width:200px;
}
В IE с position: fixed не все так гладко, как бы нам хотелось, но существует множество способов обойти эти ограничения. Назначив блоку #content относительное позиционирование (position: relative), мы сможем позиционировать любые дочерние элементы, относительно его границ. Давайте разместим блок #div-1a, в верхнем правом углу блока #content.
#content {
position:relative;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
Вооружившись знаниями из предыдущих шагов, можно попробовать сделать две колонки, с помощью относительного и абсолютного позиционирования.
#content {
position:relative;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#div-1b {
position:absolute;
top:0;
left:0;
width:200px;
}
Одним из преимуществ абсолютного позиционирования, является возможность размещать элементы в произвольном порядке, независимо от того, как именно они расположены в разметке. В приведенном выше примере, блок #div-1b расположен перед блоком #div-1a. А сейчас у вас должен был возникнуть вопрос: “А куда же делись остальные элементы из нашего примера?”. Они скрылись под абсолютно расположенными блоками. К счастью, есть возможность это исправить. Одно из решений – задать фиксированную высоту контейнеру, содержащему колонки.
#content {
position:relative;
height: 450px;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#div-1b {
position:absolute;
top:0;
left:0;
width:200px;
}
Решение не очень подходящее, поскольку мы никогда не знаем заранее, какого размера текст, будет расположен в колонках, и какой шрифт будет использован. Для колонок с переменной высотой, абсолютное позиционирование не подходит, поэтому давайте рассмотрим другой вариант. Назначив блоку float, мы максимально возможно оттолкнем его к правому (или левому) краю, а следующий за блоком текст, будет обтекать его. Обычно такой прием используется для картинок, но мы будем использовать его для более сложной задачи, поскольку это единственный инструмент, имеющийся в нашем распоряжении.
#div-1a {
float:left;
width:200px;
}
Если назначить первому блоку float: left, а затем второму float: left, каждый из блоков прижмется к левому краю, и мы получим две колонки, с переменной высотой.
#div-1a {
float:left;
width:150px;
}
#div-1b {
float:left;
width:150px;
}
Также, можно назначить колонкам противоположное значение float, в этом случае, они распределятся по краям контейнера.
#div-1a {
float:right;
width:150px;
}
#div-1b {
float:left;
width:150px;
}
Но теперь у нас появилась другая проблема – колонки выходят за пределы родительского контейнера, тем самым ломая всю верстку. Эта самая распространенная проблема начинающих верстальщиков, хотя решается она довольно просто. Чистку флоатов можно делать двумя способами. Если после колонок идет еще один блок, достаточно назначить ему clear: both.
#div-1a {
float:left;
width:190px;
}
#div-1b {
float:left;
width:190px;
}
#div-1c {
clear:both;
}
Или же назначить родительскому контейнеру свойство overflow: hidden
#content {
overflow:hidden;
}
В любом случае, результат будет один и тот же. Сегодня были рассмотрены только базовые приемы позиционирования, и самые простые примеры. Также, в помощь начинающим верстальщикам я всегда рекомендую цикл статей Ивана Сагалаева, которые в свое время мне очень помогли.fixed
Поддержка браузерами
Свойство
Opera
IExplorer
Edge
position
1.0
1.0
4.0
1.0
7.0
12.0
Значения свойства
Значение
Описание
absolute
Абсолютное позиционирование. При смещении элемент сдвигается относительно заданного края его предка, при этом предок должен иметь значение position
отличное от установленного по умолчанию - static
, иначе отсчёт будет вестись относительно, указанного края окна браузера (как при position
: fixed
).
fixed
Фиксированное позиционирование. При смещении элемент сдвигается относительно заданного края окна браузера.
static
Статическое позиционирование. Элементы отображаются в том порядке, как они указаны в потоке HTML
документа. Это значение по умолчанию.
relative
Относительное позиционирование. При смещении элемент сдвигается относительно его текущей позиции.
Устанавливает свойство в значение по умолчанию.
Указывает, что значение наследуется от родительского элемента.
Версия CSS
CSS2
Наследуется
Нет.
Анимируемое
Нет.
Пример использования
h1{position:static;}
1. position: static
2. position:relative
3. position: absolute
4. position: fixed
5. position:relative + position:absolute
6. Две колонки
7. Две колонки с фиксированной высотой
8. Float
9. “Плавающие” колонки
10. Очистка float
Заключение
