Позиционирование элементов.

Последнее обновление: 28.04.2016

CSS предоставляет возможности по позиционированию элемента, то есть мы можем поместить элемент в определенное место на странице

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

static : стандартное позиционирование элемента, значение по умолчанию

absolute : элемент позиционируется относительно границ элемента-контейнера, если у того свойство position не равно static

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

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

Не следует одновременно применять к элементу свойство float и любой тип позиционирования, кроме static (то есть тип по умолчанию).

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

Область просмотра браузера имеет верхний, нижний, правый и левый края. Для каждого из этих четырех краев есть соответствующее свойство CSS: left (отступ от края слева), right (отступ от края справа), top (отступ от края контейнера сверху) и bottom (отступ снизу). Значения этих свойств указываются в пикселях, em или процентах. Необязательно задавать значения для всех четырех сторон. Как правило, устанавливают только два значения - отступ от верхнего края top и отступ от левого края left.

Блочная верстка в HTML5

HELLO WORLD

Здесь элемент div с абсолютным позиционированием будет находиться на 100 пикселей слева от границы области просмотра и на 50 снизу.

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

Если элемент с абсоютным позиционированием располагается в другом контейнере, у которого в свою очередь значение свойства position не равно static , то элемент позиционируется относительно границ контейнера:

Позиционирование в HTML5

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

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

Позиционирование в HTML5

Свойство z-index

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

Например:

Позиционирование в HTML5

Теперь добавим к стилю блока redBlock новое правило:

RedBlock{ z-index: 100; position: absolute; top: 20px; left:50px; width: 80px; height: 80px; background-color: red; }

Здесь z-index равен 100. Но это необязательно должно быть число 100. Так как у второго блока z-index не определен и фактически равен нулю, то для redBlock мы можем установить у свойства z-index любое значение больше нуля.

И теперь первый блок будет накладываться на второй, а не наоборот, как было в начале.

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

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

top : 200px ; left : 300px ;

то расстояние его верхнего края до верхней границы страницы равно 200 пикселей, а расстояние левого края до левой границы страницы - 300 пикселей:

Помимо стилей left и top, элементу необходимо также задать стиль position со значением absolute , указывая, что мы хотим применить абсолютное позиционирование. Есть еще один полезный стиль z-index , который позволяет настроить перекрытие элементов при наложении. Элемент с абсолютным позиционированием накрывает все элементы с относительным позиционированием. Если два элемента с абсолютным позиционированием наложены друг на друга, то на передний план выталкивается тот элемент, у которого больше значение стиля z-index.

Рассмотрим пример. Есть каркас страницы на XHTML 1.0 Transitional:

<html xmlns= > <head > <title > Главная страница</ title > <meta http-equiv = "Content-Type" content = "text/html;charset=utf-8" / > </ head > <body > </ body > </ html >

Разместим в ней красный квадратный блок с абсолютным позиционированием с координатами (50; 50):

Аналогично добавим зеленый и синий блок, а также сделаем так, чтобы зеленый блок перекрывал и синий, и красный, указав ему самое большее значение стиля z-index:

<html xmlns= "http://www.w3.org/1999/xhtml" > <head > <title > Page</ title > <meta http-equiv = "Content-Type" content = "text/html;charset=utf-8" / > <style type = "text/css" > #layer1 {width: 150px; height: 150px; background: #f00; position: absolute; left: 50px; top: 50px; z-index: 20;} #layer2 {width: 150px; height: 150px; background: #0f0; position: absolute; left: 100px; top: 100px; z-index: 40;} #layer3 {width: 150px; height: 150px; background: #00f; position: absolute; left: 150px; top: 150px; z-index: 30;} </ style > </ head > <body > <div id = "layer1" > <div id = "layer2" > <div id = "layer3" > </ body > </ html >

Результат:

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

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

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

Какие бывают виды

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

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

Это первый из известных видов. Задается так: position: absolute. После этого блок теряет свои привычные свойства и полностью выпадает из нормального потока. Что представляет собой этот поток? Попробуйте поставить в разметке несколько блочных элементов подряд. Как они станут? Друг за другом, и ни как иначе.

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

Теперь его можно перемещать с помощью свойств left, right, top и bottom. По умолчанию перемещение происходит относительно краев окна браузера, но если у родительского элемента задано position: relative, то смещение происходит относительно родительского блока.

Block{ position: absolute; bottom: 0; right: 0; }

Block {

position : absolute ;

bottom : 0 ;

right : 0 ;

Элемент будет сдвинут в нижний правый угол. Я замечаю, что часто так делают кнопку наверх – просто размещают ее абсолютно в самый угол. А вот другой пример, в котором я покажу сначала возможную разметку:

< div id = "wrapper" >

< div class = "block" > < / div >

< / div >

А теперь css-стили для этого фрагмента:

#wrapper{ position: relative; } .block{ position: absolute; top: 0; right: 10px; }

#wrapper{

position : relative ;

Block {

position : absolute ;

top : 0 ;

right : 10px ;

В этом примере мы сначала родительскому контейнеру записали относительное позиционирование (relative – о нем дальше в статье), а потом для того же элемента.block задали абсолютное. В результате отсчет координат будет происходить не от самого окна браузера, а от краев элемента родителя, то есть блока wrapper.

Относительное позиционирование css-элементов

Это следующий вид и он записывается так – position: relative. Координаты задаются такими же свойствами, как и при абсолютном положении. Единственное существенное отличие заключается в том, что элемент формально не выпадает из потока – под него остается место.

Работу этого значения можно сравнить с visibility: hidden, когда элемент скрывается со страницы, но место под него остается нетронутым. Такое же происходит и при относительном размещении – блок можно двигать куда угодно, но место под него остается пустым и его не займут другие части.

Еще важно знать, что смещение происходит не от краев окна веб-обозревателя, а от того места, где изначально стоял блок. То есть:

Block{ position: relative; top: 10px; right: 50px; }

Block {

position : relative ;

top : 10px ;

right : 50px ;

Блок подвинется на 50 пикселей вправо и на 10 влево.

Фиксация

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

Position:static или обычное статическое положение

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

Как сделать позиционирование блоков в css правильно?

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

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

Другие приемы: центровка, плавающие блоки

Свойство position не решает всех проблем с расстановкой блочных элементов. Как бы вы, например, создали сетку сайта с его помощью? У меня нет хороших идей. Тут на помощь приходят другие свойства.

С помощью float в css часто делают сетки. Свойство позволяет прижать блок к левому или правому краю родителя (float: left, float: right), давая возможность нескольким блочным элементам стать в одну линию, что встречается сплошь и рядом на любых сайтах.

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

Все перечисленные в этой статьи виды позиционирования могут пригодиться веб-разработчику. Где-то иконку нужно вставить (position: absolute), где-то, чуть-чуть подправить положение блока, оставив за ним место (position: relative), а где и виджет зафиксировать (position: fixed). В общем, знание этого свойства точно лишним не будет.

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

Позиционирование — одно из ключевых понятий в блочной верстке. Разобравшись с ним, вам многое станет понятно, а верстка из шаманства превратится в осмысленный процесс. Итак, речь в статье пойдет о CSS-свойствах position и float .

1. position: static

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

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

#content{ position: static; }

2. position:relative

Относительное позиционирование (position: relative) позволяет вам использовать свойства: top, bottom, left и right, для расположения элемента относительно того места, где бы он появился при обычном позиционировании.

Давайте переместим #content на 20 пикселей вниз, и на 40 пикселей влево:

#content{ position: relative; top: 20px; left: -40px; }

Обратите внимание, что на том месте, где бы должен был находится наш блок #content, теперь образовалось пустое пространство. Следующий за блоком #content, блок #footer не переместился ниже, потому что, #content по-прежнему занимает свое место в документе, несмотря на то, что мы передвинули его.

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

3. position: absolute

При абсолютном позиционировании (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. И на этом этапе, относительное позиционирование вновь вступает в игру.

4. position: fixed

Фиксированное позиционирование (position: fixed), является подразделом абсолютного позиционирования. Единственное его отличие в том, что он всегда находится в видимой области экрана, и не двигается во время прокрутки страницы. В этом отношении, он немного похож на фиксированное фоновое изображение.

#div-1a { position:fixed; top:0; right:0; width:200px; }

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

5. position:relative + position:absolute

Назначив блоку #content относительное позиционирование (position: relative), мы сможем позиционировать любые дочерние элементы, относительно его границ. Давайте разместим блок #div-1a, в верхнем правом углу блока #content.

#content { position:relative; } #div-1a { position:absolute; top:0; right:0; width:200px; }

6. Две колонки

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

#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.

А сейчас у вас должен был возникнуть вопрос: “А куда же делись остальные элементы из нашего примера?”. Они скрылись под абсолютно расположенными блоками. К счастью, есть возможность это исправить.

7. Две колонки с фиксированной высотой

Одно из решений – задать фиксированную высоту контейнеру, содержащему колонки.

#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; }

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

8. Float

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

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

#div-1a { float:left; width:200px; }

9. “Плавающие” колонки

Если назначить первому блоку 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; }

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

10. Очистка float

Чистку флоатов можно делать двумя способами. Если после колонок идет еще один блок, достаточно назначить ему clear: both.

#div-1a { float:left; width:190px; } #div-1b { float:left; width:190px; } #div-1c { clear:both; }

Или же назначить родительскому контейнеру свойство overflow: hidden

#content { overflow:hidden; }

В любом случае, результат будет один и тот же.

Заключение

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

Для вёрстки страниц часто используются два основных инструмента — позиционирование (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 без смещений. Это позволяет позиционировать элементы внутри элемента-контейнера.

.wrap { padding: 10px; height: 150px; position: relative; background: #e7e6d4; text-align: right; border: 3px dashed #645a4e; } .white { position: absolute; width: 200px; top: 10px; left: 10px; padding: 10px; background: #ffffff; border: 3px dashed #312a22; }

Рис. 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

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

.container { padding: 20px; background: #e7e6d4; border: 3px dashed #645a4e; } .floatbox { float: left; width: 300px; height: 150px; margin-right: 20px; padding: 0 20px; background: #ffffff; border: 3px dashed #666666; }

Рис. 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. Очистка потока горизонтального списка