CSS позиционирование: абсолютное, относительное. Как переместить фундаментные блоки без крана
При относительном позиционировании блока надо задать свойство position:relative и свойства смещения. Смещение в этом случае будет происходить не относительно "родительского" элемента (как при абсолютном позиционировании), а относительно самого блока в нормальном потоке. Это будет понятнее на примере. Пусть у нас есть html-страница с тремя div-ами:
Относительное позиционирование
Давайте зададим в таблице стилей размеры и границы этих блоков:
#blok1, #blok2, #blok3 { border:1px solid red; width:150px; height:50px; }
Сейчас наша страница в браузере выглядит так:
Теперь давайте изменим положение второго блока, для этого добавим в страницу стилей правило:
#blok1, #blok2, #blok3 { border:1px solid red; width:150px; height:50px; } #blok2{ position:relative; left:50px; top:25px; }
Теперь наша страница выглядит так:
Наш второй блок сместился вниз и вправо относительно того места, где бы он находился в нормальном потоке. Остальные же блоки остались на своих местах. Практически относительное позиционирование применяется достаточно редко, поэтому мы не будем больше уделять этому внимание и рассмотрим плавающие блоки.
Плавающие блоки
Эти блоки нельзя позиционировать с точностью до пиксела, как в предыдущих схемах, но именно эта схема позиционирования очень распространенна. Без плавающих блоков обходится редкий сайт, а уж сделать "резиновую" верстку сайта без них и вовсе невозможно.
Такие блоки могут свободно перемещаться по странице, подобным образом ведут себя картинки в HTML, выровненные с помоьщью параметра align .
Плавающие блоки определяются свойством float , который определяет будет ли блок плавающим и в какую сторону он будет перемещаться. Возможны три варианта:
- left - блок прижимается к левому краю, остальные элементы обтекают его с правой стороны.
- right - блок прижимается к правому краю, остальные элементы обтекают его с левой стороны.
- none - блок не перемещается и позиционируется согласно свойству position .
Позиционирование блоков
Текст блока 1
И страница style.css со следующим кодом:
#blok1{ border:1px solid red; width:150px; height:50px; }
Сейчас наша страница в браузере выглядит так:
Давайте сделаем наш блок плавающим и прижмем его к левому краю:
#blok1{ border:1px solid red; width:150px; height:50px; float:left; }
Теперь давайте прижмем блок к правому краю:
#blok1{ border:1px solid red; width:150px; height:50px; float:right; }
Теперь наша страница в браузере выглядит так:
А что будет, если плавающих блоков на странице несколько? Давайте добавим в нашу html-страницу еще один блок:
Позиционирование блоков
Текст блока 1
Текст блока 2
Просто какие-то элементы на странице. Это может быть просто текст, ссылки, списки, картинки и т.д.
И зададим им разные значения свойства float :
#blok1{ border:1px solid red; width:150px; height:50px; float:left; } #blok2{ border:1px solid red; width:150px; height:50px; float:right; }
Теперь наша страница в браузере выглядит так:
А если у них будут одинаковые значения? Например:
#blok1{ border:1px solid red; width:150px; height:50px; float:left; } #blok2{ border:1px solid red; width:150px; height:50px; float:left; }
Тогда второй блок прижмется к правому краю первого блока:
Аналогична будет ситуация при одинаковых значениях right :
#blok1{ border:1px solid red; width:150px; height:50px; float:right; } #blok2{ border:1px solid red; width:150px; height:50px; float:right; }
Обратите внимание: сначала к правому краю прижмется блок 1, а уже к нему прижмется блок 2.
А что делать, если мы хотим, чтобы блоки были прижаты к правому краю, но располагались бы один под другим. Для этого существует свойство clear , которое определяет, какие стороны плавающего блока не могут соседствовать с другими плавающими блоками. У этог свойства может быть задано одно из четырех значений:
- left - блок должен располагаться ниже всех левосторонних блоков.
- right - блок должен располагаться ниже всех правосторонних блоков.
- both - блок должен располагаться ниже всех плавающих блоков.
- none - никаких ограничений нет, это значение по умолчанию.
#blok1{ border:1px solid red; width:150px; height:50px; float:right; } #blok2{ border:1px solid red; width:150px; height:50px; float:right; clear:right; }
Теперь получилось так, как и хотелось: один блок под другим:
В предыдущем уроке, мы с вами с помощью абсолютного позиционирования делали вот такую страницу:
Давайте посмотрим, как ее можно сделать с помощью плавающих блоков. Итак, код самой страницы следующий:
Позиционирование блоков
шапка сайта
Контент
блок новостей
низ сайта
На странице style.css зададим сначала размеры и фон для наших блоков:
#header{ background:darkred; width:715px; height:100px; } #menu{ background:oldlace; width:190px; height:300px; } #content{ background:oldlace; width:525px; height:300px; } #footer{ background:darkred; width:715px; height:30px; } #news{ background:yellow; width:150px; height:280px; }
Сейчас наши блоки располагаются в нормальном потоке, т.е. один под другим. Нам надо сделать блоки menu и content плавающими и левосторонними. А блок news должен прижиматься к правому краю, т.е. его мы сделаем правосторонним плавающим блоком:
#header{ background:darkred; width:715px; height:100px; } #menu{ background:oldlace; width:190px; height:300px; float:left; } #content{ background:oldlace; width:525px; height:300px; float:left; } #footer{ background:darkred; width:715px; height:30px; } #news{ background:yellow; width:150px; height:280px; float:right; }
Наша страница в браузере выглядит так:
Посмотрим на наш блок новостей, видно, что он располагается ниже текста в блоке content . А ведь мы хотели, чтобы блок новостей был справа, а текст обтекал бы его слева.
Почему же у нас так не получилось? Потому что наш блок news в html-коде располагается ниже текста и его будет обтекать только тот текст, который расположен ниже его. Чтобы исправить это надо поместить наш div="news" выше текста (т.е. до слова "контент"):
Позиционирование блоков
шапка сайта
блок новостей
Контент
низ сайта
Вот теперь наш блок новостей находится на своем месте:
А чтобы он не прижимался вплотную к верхнему и правому краям, мы добавим для этого блока значение полей:
#news{ background:yellow; width:150px; height:280px; float:right; margin:10px; }
Теперь мы добились такого же резельтата, как и при абсолютном позиционировании.
Согласитесь, что с помощью плавающих блоков верстать страницу проще: не надо рассчитывать пикселы, да и код короче. К тому же при "резиновой" верстке мы и не можем указать точное расположение блока на экране, а с помощью плавающих блоков нам это и не нужно, достаточно указать лишь ориентир (слева, справа, ниже или в той же линии).
Фиксированные блоки
Как вы помните при фиксированном позиционировании блок фиксируется относительно области просмотра. В некотором смысле фиксированные блоки похожи на фреймы. Только внутри фрейма доступна прокрутка, а внутри блока нет.
У фиксированных блоков есть один существенный недостаток: они не поддерживаются браузерами Internet Explorer. А потому использовать их пока не следует. Поэтому здесь мы лишь укажем синтаксис такого правила, если хотите попробуйте сами (например, в браузере Opera).
#blok{ position:fixed; left:0px; top:0px; }
Блок с идентификатором "blok" будет при прокрутке страницы оставаться на месте.
На сегодня все. В следующем уроке мы познакомимся еще с некоторыми свойствами блоков и их видами.
При работе с текстом пользователю может потребоваться поменять предложения или целые абзацы местами или расположить фрагменты каким-то нестандартным образом. Переместить блок текста в приложении Microsoft Office Word можно несколькими способами.
Инструкция
Ctrl, Shift и стрелка вправо/влево выделяют слово, а если использовать стрелки вверх или вниз, можно выделить целый абзац.
От автора: приветствую вас. Позиционирование 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). В общем, знание этого свойства точно лишним не будет.
Ну а чтобы узнавать еще больше из мира сайтостроения, обязательно подписывайтесь на наш блог и получайте новые обучающие материалы. А еще я советую вам глянуть наши , где тоже поднимается подобная тема. (позиционирование элементов)
Блочный элемент в HTML –это такой элемент, который занимает по умолчанию всю ширину родительского элемента. Родительским элементом может быть другой блочный элемент, или окно браузера. Блочному элементу с помощью свойств CSS можно задать ширину (width) и высоту (height). Позиционированием блочных элементов называется процесс их расположения внутри окна браузера и относительного друга с помощью CSS свойств position , left , top , right и bottom . Свойство CSS position предназначено для задания одного из четырёх доступных видов позиционирования: static (по умолчанию), absolute (абсолютное), fixed (фиксированное) и relative (относительное). Остальные CSS свойства, а именно left , top , right и bottom предназначены для задания расстояний относительно левого, верхнего, правого и нижнего края родительского элемента. Также блочные элементы при задании определенных свойств могут накладываться друг друга, и данную возможность то же можно использовать на сайтах.
Позиционирование по умолчанию (static)
Если вы не указали position у блочного элемента или указали static , что одно и то же, то в таком случае блочные элементы располагаются по порядку. Причем следующий блок (например: красный) располагается с новой строки. Так же на данное позиционирование не действует задание расстояний left , top , right и bottom .
Абсолютное позиционирование (absolute)
При абсолютном позиционировании положения элемента задаётся относительно краёв окна браузера с помощью расстояний, задаваемых свойствами left , top , right и bottom . Если указать расстояния left и right одновременно, и они будут противоречить между собой, то предпочтение отдаётся left , то же самое касается top и bottom , в которых больший приоритет имеет расстояние top . Абсолютное позиционирование применяется очень часто совместно с относительным позиционированием в дизайнерских целях, когда необходимо разместить различные элементы относительного друг друга, так же может применяться для создания выпадающих меню, разметки сайта и т.д.
![](https://i0.wp.com/itchief.ru/assets/images/tickets/2014.10/position-absolute.png)
Фиксированное позиционирование (fixed)
Фиксированное позиционирование отличается от других видов позиционирования и не перемещается вместе с контентом при скроллинге страницы. Блочные элементы с фиксированным позиционированием привязываются с помощью свойств left , top , right и bottom к краям окна браузера. Фиксированное позиционирование применяется для создания фреймовых интерфейсов (окно браузера делится на несколько областей), фиксированного меню, фиксированного подвала сайта и "постоянных" блоков (перечень ссылок, социальные кнопки и т.д.).
![](https://i0.wp.com/itchief.ru/assets/images/tickets/2014.10/fixed_position.png)
Относительное позиционирование (relative)
Относительное позиционирование задаётся с помощью задания расстояний left , top , right и bottom относительно его текущего положения.
![](https://i1.wp.com/itchief.ru/assets/images/tickets/2014.10/position-relative.png)
Однако такое положение блока можно создать и с помощью свойства margin (отступы).
Относительное позиционирование не интересно использовать само по себе, оно в основном применяется вместе с абсолютным позиционированием.
Рассмотрим варианты:
![](https://i1.wp.com/itchief.ru/assets/images/tickets/2014.10/absolute_in_relative.png)
В языке HTML все элементы можно разделить на блочные и строчные. Блочные элементы обычно представляются как прямоугольные области с некоторым количеством информации. С их помощью выстраивается сетка страницы. Такие элементы занимают все доступное им пространство по ширине, а до и после них обычно присутствует перенос строки. Блокам можно задавать отступы, горизонтальные и вертикальные размеры.
Особенности блочных элементов
К блочным относятся теги, выделяющие большое количество текстовой информации: