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

CSS позиционирование: как разместить элементы в CSS

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

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

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

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

Зачем нужно позиционирование?

Итак, для чего нам вообще позиционирование? Представим себе простенький сайт, который состоит из шапки, контентного блока, сайдбара и футера. Если мы разместим эти блоки и никак не изменим их стандартного блочного поведения, они просто станут вертикально друг за другом. Для шапки и футера это обычное состояние, но вот сайдбар обычно располагается справа или слева от контентного блока. Такое отображение элементов (когда они идут по вертикали сверху вниз в том порядке, в котором они идут в html-коде) называют позиционированием в нормальном потоке. С помощью css-свойства position можно задать еще три способа размещения: абсолютный, относительный и фиксированный.

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

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

Соответственно, все элементы, которые были ниже этого блока, подвинутся вверх. Задав абсолютное позиционирование (position: absolute) мы можем двигать элемент с помощью свойств left, right, top, bottom. При этом отсчет будет идти от краев окна браузера. Если элемент вложен в другой родительский блок, то координаты могут отсчитываться от родителя. Для этого ему нужно задать position: relative, а уже нужный дочерний блок позиционировать абсолютно. Например, задав bottom: 0, right: 0, наш элемент станет прижатым к нижнему правому краю. При абсолютном позиционировании можно указывать отрицательные значения координат. Тогда элемент может частично “выпасть” за страничку или вовсе исчезнуть с нее.

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

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

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

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

Третье значение свойства position — это fixed. Как вы уже догадались, речь идет о фиксированном позиционировании. На самом деле, это очень удобная вещь. Наверняка на некоторых сайтах вы замечали элементы, которые остаются на странице при ее вертикальной прокрутке? Это может быть какая-то важная информация, которую создатели сайта хотят оставить на видном месте. Для этого такую информацию заключают в блок, которому задают фиксированное позиционирование.

Да, это реклама, но надеюсь, она будет полезна вам. GetUniq это сервис для вебмастеров и всех работающих с трафиком людей, с помощью которого можно выгоднее пополнять счета в кабинетах рекламных сетей, таких как Яндекс.Директ, MyTarget, ВК Таргет и другие. Без использования сервиса вам придется заплатить 1180 рублей за пополнение счета в Директе на 1000, а используя возможности Getuniq за эти же 1180 на ваш счет поступит 1100-1200 рублей! То же самое для всех других сетей. Я сам уже начал использовать и порекомендовал всем знакомым вебмастерам, рекомендую и вам. При желании, по этой ссылке вы можете почитать мой обзор сервиса.

При этом блок будет вести себя так же, как и если бы он был позиционирован абсолютно. Единственное отличие – он будет оставаться на странице на своем месте при ее прокрутке. Элемент постоянно находится в области просмотра, как долго бы вы ни скролили страничку. Простой пример – кнопка “Наверх”, которая есть практически на любом современном сайте. Обычно она появляется, когда вы уже прокутили страницу немного вниз. Далее эта кнопка постоянно остается на своем месте, сколько бы вы ни листали вниз. Это удобно, потому что вы можете пролистать в самый низ, а потом спокойно нажать на кнопку и вернуться наверх за одно мгновение.

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

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

В заключении

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

Ну а если вы хотите хорошо закрепить знания на практике, я рекомендую вам пройти бесплатный курс на эту тему на сайте Html Academy!. Более 100 тысяч человек уже обучаются с помощью этих интерактивных курсов. А у меня на этом все.

Очередной блог фрилансера

Позиционирование — одно из ключевых понятий в блочной верстке. Разобравшись с ним, вам многое станет понятно, а верстка из шаманства превратится в осмысленный процесс. Итак, речь в статье пойдет о 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; }

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

Заключение

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

Перевод скринкаста “Learn CSS Positioning in Ten Steps”.

CSS позиционирование – шпаргалка для начинающих

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

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

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

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

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

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

• relative;
• absolute;
• inherit;
• fixed;
• static.

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

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

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

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

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

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

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

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

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

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

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

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

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

Подробности Автор: Георгий Оплачкин

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

- static  - это позиция бокса по умалчиванию

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

- absolute  - при этом задаются конкретные параметры бокса относительно основного (вложенный бокс будет занимать позицию внутри основного при его состоянии relative, при состоянии основного бокса static, а зависимого блока  absolute, последний можно разместить в любом месте страницы сайта)

- fixed -  свойства почти как у absolute, отличие состоит в том, что при прокрутке страницы сайта положение бокса не меняется то есть он фиксированный все время на месте

position

Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице.

Синтаксис position: absolute | fixed | relative | static

Аргументы

absolute

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

fixed

По своим свойствам это значение аналогично аргументу absolute, но в отличие от него привязывается к указанной параметрами left, top, right и bottom точке на экране и не меняет своего положения даже при пролистывании веб-страницы. Браузеры Netscape, Mozilla и Firefox вообще не отображают полосы прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но они никак не влияют на позицию элемента. Internet Explorer 6 и ниже не поддерживает данный аргумент.

relative

Положение элемента устанавливается относительно его исходного места. Добавление атрибутов left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения, в зависимости от применяемого параметра.

static

Элементы отображаются как обычно. Использование параметров left, top, right и bottom не приводит к каким-либо результатам.

 inherit

наследование родительского класса.

---

Смотрите также

• 
  Как сделать гиперссылку в html
• 
  Как в word сделать многоуровневый список
• 
  Как pdf изменить на word
• 
  Как удалить разрыв разделов в word 2007
• 
  Как в word добавить колонтитулы
• 
  Как в word сделать оглавление
• 
  Как вставить фото в резюме word
• 
  Как в word сделать заголовок
• 
  Thunderbird как создать html письмо в
• 
  Как отправить html письмо с почты outlook
• 
  Sublime text 3 как запустить html