CSS — position
Для того, чтобы сделать более сложный шаблон, мы должны обсудить стилевое свойство position. Оно имеет кучу возможных значений, названия которых лишены смысла и их невозможно запомнить. Давайте рассмотрим одно значение за другим по очереди. Не исключено, что вам следует добавить эту страницу в закладки.
static
.static {
position: static;
} static является значением по умолчанию. Элемент с position: static; отображается как обычно и не будет позиционироваться каким-либо специальным способом, он просто плюхнется вниз.
relative
.relative1 {
position: relative;
}
.relative2 {
position: relative;
top: -20px;
left: 20px;
background-color: white;
width: 500px;
} relative ведет себя в точности как
Добавление свойств top, right, bottom, и left изменяет позицию элемента, сдвигая его в ту или иную сторону относительно его начального расположения. Другой контент не будет перестраиваться, чтобы заполнить любое свободное пространство, оставленное этим элементом.
fixed
<div>Привет! Не обращай на меня внимания.
</div> Фиксированное позиционирование элемента относительно окна браузера таково, что он всегда занимает одно и тоже место даже при прокрутке страницы, словно он приклеен к экрану. Также как и для relative, дополнительные свойства top, right, bottom, и left для данного позиционирования будут работать.
Я уверен, что вы заметили этот неподвижный элемент в правом нижнем углу страницы. Если же нет, то обратите внимание на него сейчас. Вот CSS, который применяется к нему:
.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 200px;
background-color: white;
}Фиксированный элемент не оставляет за собой свободное пространство на странице, где он был расположен.
У мобильных браузеров достаточно шаткая поддержка фиксированного позиционирования. Узнать больше об этой ситуации можно здесь..
absolute
absolute наиболее сложное значение позиционирования. absolute ведет себя как fixed за исключением того, что позиционирование отсчитывается относительно ближайшего расположенного родителя а не относительно окна браузера. Если элемент абсолютно позиционирован и не имеет родителя,то он использует тело документа и продолжает двигатся вместе со всей страницей при скроллинге. Помните , что «позиционированный» элемент — это элемент с любым значением свойства position кроме значения
Вот простой пример:
.relative {
position: relative;
width: 600px;
height: 400px;
}
.absolute {
position: absolute;
top: 120px;
right: 0;
width: 300px;
height: 200px;
} Этот элемент относительно позиционированный. Если бы элемент имел значение position: static; то его асболютно позиционированный ребенок убежал бы и стал позиционироваться уже относительно тела документа.
Этот элемент абсолютно позиционированный. Он позиционирован относительно его родителя.
</div> </div> Этот материал на первый взгляд может показаться сложным, но он очень важен, чтобы создавать хорошую CSS разметку. На следующей странице мы будем использовать position на практике.
Разделяй и властвуй — float, position и display / Habr
Поговорим о всем известном свойстве float, не менее известном position и их соседе — display. Как известно, в css есть понятие «схема позиционирования». Этих схем позиционирования есть три вида — нормальный поток, поплавки и абсолютное позиционирование.Теперь необходимо ввести некоторые термины, прежде чем написать то, что я хочу донести.
Документ — это наша страница.
Дерево документа — это структура, которую мы описали с помощью html в документе.
Для каждого элемента в дереве документа генерируется так называемый box. Назовём его контейнером, по-моему это достаточно точно отражает его смысл.
Также необходимо учитывать, что каждый элемент генерирует несколько контейнеров-потомков, для которых контейнер является содержащим (если он сгенерирован блочным элементом).
Контейнеры-потомки располагаются относительно содержащего контейнера, но им не ограничиваются, что может вызвать переполнение.
Конечно, всё немного сложнее, хотя нам можно не углубляться в дебри спецификации. Замечу лишь, что есть разные типы контейнеров, но оставим типы контейнеров на потом.
Контейнер располагается в соответствии со одной из схем позиционирования:
- Нормальный поток (normal flow, далее поток), включающий в себя форматирование блока, инлайн-форматирование и относительное позиционирование.
- Поплавки (float). В этом случае, контейнер изначально позиционируется в соответствии с потоком, а затем сдвигается вправо или влево насколько возможно.
- Абсолютное позиционирование (absolute positioning). При таком подходе контейнер полностью изымается из потока (т.е. не оказывает никакого влияния на соседние контейнеры) и располагается относительно содержащего контейнера.
Выбор схемы позиционирования осуществляется с помощью свойств float и position. За что отвечает свойство display? Оно отвечает за тип контейнера (а иногда ещё и контейнера-потомка), который будет сгенерирован элементом.
Эти три свойства (postition, float, display) взаимодействуют следующим образом:
- Если display равно none, то float и position должны быть проигнорированы. При этом элемент не сгенерирует контейнера.
- Если position равно absolute или fixed (подвид absolute), то display устанавливается в block, а float — в none (таким образом, указанный position отменяет float). Расположение блока в этом случае описывается свойствами top, right, bottom, left и содержащим контейнером.
- Если float не равен none, то display устанавливается в block и контейнер всплывает.
- Иначе применяется свойство display, в том виде, в котором оно было определено.
Теперь самое главное, то, что следует из взаимодействия свойств и должен бы знать каждый, но многие забывают:
В случае абсолютного расположения контейнера (position равно absolute или fixed), свойство display устанавливается в block, а float в none, независимо от того, что кто-либо написал в css.
В случае расположения контейнера, как поплавка (float не равно none), свойство display устанавливается в block, независимо от того, что кто-либо написал в css.
Ссылки:
www.w3.org/TR/REC-CSS2/visuren.html
www.w3.org/TR/REC-CSS2/visudet.html
ps. Также хочу выразить благодарность товарищу с форума Вебмаскона, который сподвиг меня на написание этой статьи.
Layout position Property CSS уроки для начинающих академия
Свойство position указывает тип метода позиционирования, используемого для элемента (статический, относительный, фиксированный, абсолютный или липкий).
Свойство Position
Свойство position указывает тип метода позиционирования, используемого для элемента.
Существует пять различных значений позиции:
staticrelativefixedabsolutesticky
Затем элементы раздаются с помощью свойств «верх», «снизу», «влево» и «вправо». Однако эти свойства не будут работать, если только свойство position не задано первым. Они также работают по-разному в зависимости от значения положения.
позиция: статическая;
Элементы HTML по умолчанию позиционируют статический.
На статические позиционные элементы не влияют верхние, нижние, левые и правые свойства.
Элемент с position: static; не позиционируется каким-либо особым образом; он всегда позиционируется в соответствии с нормальным потоком страницы:
Этот элемент <div> имеет позицию: Static;
Вот CSS, который используется:
Пример
div.static {
position: static;
border: 3px solid #73AD21;
}
позиция: относительная;
Элемент с position: relative; располагается относительно его нормального положения.
Установка верхнего, правого, нижнего и левого свойств относительно расположенного элемента приведет к Он должен быть отрегулирован от своего нормального положения. Другое содержимое не будет скорректировано, чтобы уместиться в зазор, оставленный элементом.
Этот элемент <div> имеет положение: относительный;
Вот CSS, который используется:
Пример
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
CSS: position. Примеры с позиционированием
Позиционирование задаётся с помощью свойства position. Свойство может иметь четыре значения, которые мы и рассмотрим.
Абсолютное позиционирование
Абсолютное позиционирование задается так:
position: absolute
После этого блок теряет свои привычные свойства и полностью выпадает из потока. Что представляет собой поток в данном контексте? Попробуйте расположить в разметке несколько блочных элементов подряд. Они будут идти друг за другом. Это стандартное поведение блоков по умолчанию. Если блоку присвоить абсолютное позиционирование, то он полностью выпадает из потока, другие блоки просто перестают замечать его, но при этом элемент остается на странице. Абсолютное позиционирование часто применяется для точной расстановки отдельных элементов.
Теперь его можно перемещать с помощью свойств left, right, top и bottom. По умолчанию перемещение происходит относительно сторон окна браузера, но если у родительского элемента задано position: relative, то смещение происходит относительно родительского блока.
.block{
position: absolute;
bottom: 0;
right: 0;
background: gray;
}
Элемент с классом block будет сдвинут в нижний правый угол браузера.
Рассмотрим пример, когда блок находится внутри родительского элемента.
<style> #wrapper{ position: relative; width: 200px; height: 100px; background: yellow; } .block{ position: absolute; top: 1px; left: 5px; right: 10px; bottom: 15px; background: green; } </style> <div id = "wrapper"> <div class = "block">Блок внутри родительского элемента</div> </div>
Блок внутри родительского элемента
Мы сначала родительскому контейнеру записали относительное позиционирование (relative), а для элемента block задали абсолютное. В результате отсчет координат будет происходить не от самого окна браузера, а от краев элемента родителя, то есть блока wrapper.
Относительное позиционирование
Относительное позиционирование записывается так – position: relative. Координаты задаются такими же свойствами, как и при абсолютном позиционировании. Единственное существенное отличие заключается в том, что элемент формально не выпадает из потока – под него остается место.
Работу этого значения можно сравнить с visibility: hidden, когда элемент скрывается со страницы, но место под него остается нетронутым. Блок можно двигать куда угодно, но место под него остается пустым и его не займут другие части. Сдвинуть блок можно с помощью свойств top, left и так далее.
Помните, что смещение происходит не от краев окна браузера, а от того места, где изначально стоял блок.
<style>
.block_standard {
width: 300px;
height: 150px;
background: pink;
margin: 2px;
}
.block2 {
position: relative;
top: -10px;
left: 50px;
background: green;
}
</style>
<div>Стандартный блок</div>
<div>Стандартный блок</div>
<div>Блок подвинется на 50 пикселей вправо и на 10 вверх. Но его место осталось нетронутым.</div>
<div>Стандартный блок</div>
Стандартный блок
Стандартный блок
Блок подвинется на 50 пикселей вправо и на 10 вверх. Но его место осталось нетронутым.
Стандартный блок
Как видите, можно задавать и отрицательные значения.
Фиксированное позиционирование
Распространённый вариант, когда при прокрутке элемент словно приклеивался к одному месту. Например, часто используется в шапке сайта. В основном это реализуется с помощью фиксированного позиционирования. Для этого нужно записать:
.block{
position: fixed;
}
По поведению фиксированное смещение схоже с абсолютным – элемент выпадает из нормального потока, его место освобождается и другие элементы вообще его не замечают. С помощью такого приема можно очень легко сделать верхние, нижние, боковые панели на своем сайте, которые не будут исчезать при прокрутке и всегда находиться на виду.
Статическое позиционирование
Последний вид – статическое позиционирование, это обычное поведение блочный элементов. Его не нужно прописывать, потому что оно стоит по умолчанию. Но иногда position: static используют, чтобы отменить другой вид позиционирования при определенных событиях на веб-странице в сценариях JavaScript.