Абсолютное позиционирование css. Абсолютное позиционирование в CSS: понять раз и навсегда. Преимущества верстки с помощью тега

), списки (

) и другие элементы.

А теперь о

ах.

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

. Также использование данного тега не обязывает вас задавать ему какое-либо положение на веб-странице.
Смысл применения блока, заданного тегом
сводится к укрупнению. Ведь внутрь его можно поместить другие элементы (параграфы, картинки, и тд.). Таким образом получается крупный блок, с разнообразным содержимым, который значительно легче позиционировать на веб-странице, нежели каждый из элементов в отдельности.
Позиционирование элементов.
Существует четыре основных типа позиционирования:
1. Статическое (Static)
2. Абсолютное (Absolute)
3. Фиксированное (Fixed)
4. Относительное (Relative )
Статическое (Static)
Используется как расположение «по умолчанию». В этом случае браузер просматривает html код, разделяет его на элементы и составляет из них страницу. Получается последовательность из ряда элементов. Выводятся они в том порядке, в котором указаны в html коде.
Применение параметров left, top, right и bottom не приводит к каким-либо результатам.
Необходимо помнить о статическом позиционировании, когда используется относительное расположение.
Абсолютное (Absolute)
С помощью абсолютного позиционирование задаются координаты левого верхнего угла блока. При этом отсчет координат происходит относительно расположения родительского элемента. Если родительским элементом является окно браузера, тогда выравнивание блока происходит относительно него. Если существует другой элемент, внутри которого расположен блок, тогда выравнивание происходит уже относительно этого элемента.
Фиксированное (Fixed)
Уже из названия становится ясно, что в данном случае элемент фиксируется. Он располагается в определенном месте веб-страницы и никуда не сдвигается. Подобное выравнивание часто применяется по отношению к всплывающим окнам, когда они фиксируются по центру и не смещаются при прокрутке страницы.
Относительное (Relative)
С этим видом позиционирования могут быть сложности. Его название не совсем удачное. Многие путают относительное и абсолютное позиционирование элементов. Может показаться, что выравнивание происходит относительно родительского элемента. А в случае с абсолютным позиционированием - относительно окна браузера. Но это не так.
Нужно уяснить, что расположение элемента в этом случае происходит относительно его же места в статическом положении. Это то, о чем упоминалось выше.
Проще говоря, вы указываете браузеру, что необходимо передвинуть элемент на столько-то пикселей, относительно того места, где он расположен по умолчанию.
Существует еще один сложный момент. Что произойдет, если родительский элемент имеет относительное позиционирование, а вложенный в него элемент абсолютное? В этом случае отсчет координат дочернего элемента будет производиться относительно родительского элемента, с учетом его смещения, если оно имеет место.
Подведем итог.
Итак, имеется свойство position . Это свойство может принимать 4 значения Static, Absolute, Fixed и Relative . По умолчанию идет Static .
Когда вы указываете координаты для элемента, необходимо также сообщить браузеру, каким образом он должен эти координаты отсчитывать. Надо дать ему отправную точку.
Не забывайте, что при отсутствии свойства position координаты учитываться не будут, блок останется на прежнем месте, в своем статическом положении.


А теперь посмотрим, каким образом задаются координаты.
Для этих целей применяются четыре вида свойств:
1. Top
2. Left
3. Right
4. Bottom
Top - положительное значение (например, 20px) смещает блок на 20 пикселей вниз. Отрицательное значение (-20px) смещает элемент на 20 пикселей верх. Все это происходит относительно левого верхнего угла.
Left - смещение влево или вправо, в зависимости от знака. Относительно левого верхнего угла.
Right - смещение вправо и влево, смотря какой знак. Относительно правого верхнего угла.
Bottom - смещение вверх или вниз, зависит от знака. Происходит относительно левого нижнего угла.
Вот код HTML:







А это CSS:
#1 {
position:relative;
top:100px;
left:100px;
width:500px;
height:500px;
background-color:#CCCCCC;
}
#11 {
background-color:#003399;
position:absolute;
bottom: -30px;
right: -50px;
width:100px;
height:100px;
}
#2 {
background-color:#990066;
width:200px;
height:300px
}
Потренируйтесь.
Пока писал и сам разобрался .
Необычное расположение!
Решите, какой элемент отображать спереди!
Элементы могут перекрываться!
Позиционирование
CSS свойства позиционирования позволяют вам позиционировать элемент. Также они могут расположить элемент позади другого, и указать, что должно произойти, когда содержимое элемента слишком большое.
Элементы могут располагаться, используя свойства top (сверху), bottom (снизу), left (слева), и right (справа). Однако, эти свойства не будут работать, пока не установлено свойство position. Также они работают по-разному, в зависимости от метода позиционирования.
Существует четыре различных метода позиционирования.
Статическое Позиционирование
HTML элементы позиционируются статически по умолчанию. Статически позиционированный элемент всегда располагается в соответствии со стандартным потоком элементов на странице.
Статически расположенные элементы не подвергаются воздействию свойств top, bottom, left, и right.
Фиксированное Позиционирование
Элемент с фиксированным положением позиционирован относительно окна браузера.
Он не будет двигаться, даже если окно прокручивается:
Замечание: IE7 и IE8 поддерживают значение fixed только если указан тип документа!DOCTYPE.
Фиксированно расположенные элементы удаляются из нормального потока. Документ и другие элементы ведут себя так, будто фиксированно расположенный элемент не существует.
Зафиксированные элементы могут перекрывать другие элементы.
Относительное Позиционирование
Относительно позиционированный элемент располагается относительно по отношению к его обычной позиции.
Относительно позиционированные элементы часто используются в качестве контейнеров для абсолютно позиционированных элементов.
Абсолютное Позиционирование
Абсолютно позиционированный элемент располагается относительно первого родительского элемента, который позиционирован иначе, чем статически. Если такого элемента не найдено, за родительский элемент принимается :
Абсолютно позиционированные элементы удаляются из стандартного потока элементов. Документ и другие элементы ведут себя так, будто абсолютно позиционированный элемент не существует.
Абсолютно расположенные элементы могут перекрывать другие элементы.
Перекрытие Элементов
Когда элементы расположены вне стандартного потока, они могут перекрывать другие элементы.
Свойство z-index указывает вертикальный порядок элемента (какой элемент должен быть помещен спереди, или сзади других элементов).
Элемент может иметь положительный или отрицательный вертикальный порядок:
Элемент с большим вертикальным порядком всегда находится впереди элементы с меньшим вертикальным порядком.
Замечание: Если два позиционированных элементы перекрываются и не указан вертикальный порядок, элемент расположенный позже в HTML коде будет показан сверху.
Еще примеры
Установка формы элемента
Этот пример демонстрирует как задать форму элемента. Элемент обрезается по этой форме, а затем отображается.
Как показать переполненный элемент, используя прокрутку
Этот пример демонстрирует как установить свойство overflow, чтобы создать полосу прокрутки, когда содержимое элемента слишком большое, чтобы уместиться в указанной области.
Как заставить браузер автоматически управлять переполнением
Этот пример демонстрирует как заставить браузер автоматически управлять переполнением.
Изменение курсора
Этот пример демонстрирует как изменить курсор.
Все CSS Свойства Позиционирования
Число в столбце "CSS" указывает, в какой версии CSS определено свойство (CSS1 или CSS2).
Свойство	Описание	Значения	CSS
Часто на практике приходится решать задачу группирования и выравнивания контента средствами CSS. Сегодня мы рассмотрим основные способы размещения элементов в горизонтальный ряд.
Материал данной статьи призван помочь начинающим веб-дизайнерам в освоении приемов верстки web-страниц.
Из чего выбрать или методы
Существует несколько способов расположения структурных элементов в ряд в горизонтальной плоскости. Наиболее полезными, с точки зрения практического применения, являются:
• метод «Float»
• метод «Inline-block»
• метод «Table-cell»
Каждый из них имеет свои преимущества, области применения и недостатки. Рассмотрим их по порядку.
«Для рывка» или немного теории
Все структурные элементы HTML можно условно разделить на:
Инлайновые (встроенные) – типа img, span и им подобные. У нас нет возможности менять их фон и задавать им произвольные линейные размеры.
Блочные – занимающие всю ширину родительского блока, всегда начинаются с новой строки – p, h, div .
Наглядный пример встроенных и блочных структур приведен ниже:
Метод «Float»
Как уже известно (см. выше), блочный элемент размещается с новой строки вне зависимости от заданной ему ширины (width ). По этому, уменьшая горизонтальный размер div -а, в рядок блочки не построить.
Наиболее популярный (особенно среди начинающих верстальщиков), метод решения это использование свойства float .
CSS свойство float обрело большую популярность и практическую ценность после перехода от табличного способа верстки к блочному.
Float: left (right) трансформирует блочный элемент в плавающий, выравнивает по левому (правому) краю родительского блока и устанавливает обтекание справа (слева) текстом и другими элементами.
Для примера, создадим четыре блока, которые нужно разместить в ряд:
< html> < head> < meta charset= "utf-8" > < link rel= "stylesheet" media= "all" type= "text/css" href= "style.css" /> < body> < div class = "bblock" > Строим < div class = "bblock" > горизонтальный < div class = "bblock" > ряд < div class = "bblock" > из дивов
И внешнюю таблицу стилей с следующим содержимым:
div { float: left; /*Задаем обтекание*/ line- height: 120px; font- size: 40px; background: dodgerblue; color: white; margin- top: 60px; width: 320px; /*Фиксируем ширину блока*/ }
В результате получаем четыре блока, расположенные в горизонтальный ряд и выровненные по левому краю родительского блока:
Иногда на практике бывает необходимо выровнять блоки по правому краю родительского элемента. Изменим обтекание блоков в предыдущем примере:

float: right;
Обратите внимание на надписи, расположенные в блоках. На первый взгляд может показаться, что пример отработал криво. Но на самом деле, браузер обработал код правильно: прочитал блоки сверху вниз, и сделал то, что мы от него просили - выровнял по правому краю. Учтите этот момент при использовании свойства float: right .
Для того, чтобы прервать обтекание элементов с какого-то конкретного места, используйте строчку:
< div style= "clear: both;" >
В рассмотренном выше примере расстояния между блоками мы задавали при помощи отступа margin-right . Но что делать, если у вас при верстке страницы возникла задача: разместить блоки в ряд, центрировать их, да и еще чтобы отступы были только между ними, но никак не снаружи?
Алгоритм действий следующий.
< div class = "wrap" > < div class = "bblock" > Строим < div class = "bblock" > горизонтальный < div class = "bblock" > ряд < div class = "bblock" > из дивов
Wrap { width: 1310px; /*фиксируем ширину обертки*/ margin: 0 auto; /*центрируем ее*/ background: darkgray; height: 120px; /*Задаем высоту обертки*/ } . bblock { float: left; /*Задаем обтекание*/ line- height: 120px; /*Высота строки + верт. центрирования текста*/ font- size: 40px; background: dodgerblue; color: white; width: 320px; /*Фиксируем ширину блока*/ margin- right: 10px; text- align: center; /*Центрируем текст по горизонтали*/ } . wrap : last- child { margin- right: 0px; /*Убираем поле последнего div-а*/ }
В результате получаем такую картину:
Ну что же, всех практических ситуаций не рассмотришь, по этому перейдем к общим особенностям.
Важно!!!
Метод «Inline-block»
Как строчные так и блочные элементы имеют свои преимущества и недостатки в контексте каждой конкретной решаемой задачи. А что если объединить их преимущества?
Встречайте, гвоздь программы – свойство display: inline-block .
display: inline-block генерирует блочно-строчный элемент, который по сути является строчным, но сохраняет блочные свойства – позволяет изменять линейные размеры, задавать поля, отступы и т.д.
Блочно-строчный элемент имеет следующие свойства:
• высота и ширина блока определяется автоматически по содержимому и значению отступов (padding )
• высота и ширина блока может быть задана фиксировано
• Отсутствует эффект схлопывания границ .
Рассмотрим пример создания простого навигационного меню, содержащего картинку и ссылку.
< div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" > Ссылка меню 1 длиннее обычного < div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" > Ссылка меню 2 < div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" > Ссылка меню 3 < div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" > Ссылка меню 4
Nav { display: inline- block; /*Задаем блочно-строчное отображение*/ width: 180px; /*задаем ширину блока*/ background: dodgerblue; } . string { text- align: center; /*Равняем текст по-горизонтали*/ }
В результате получаем такую менюшку:

Как видим, получилось кривовато... Но расстраиваться мы не намерены, по-этому применяем к нашим дивам CSS свойство vertical-align (подробнее см. ниже):
vertical- align: top;
Теперь наша навигационная панель выровнялась по верхней линии:

Конечно, приведенный пример является примитивным, но я уверен, что на его основе вы сможете создать настоящий шедевр!!!
Важно!!!
• Для древних версий Firefox добавляем строчку:
  

  display: - moz- inline- stack;

  
  и оборачиваем элемент в дополнительную div-обертку.
• IE 7 и более ранние версии - добавляем строчки:
  

  zoom: 1 ; /*задаем hasLayout*/ * display: inline; /*звездочка – хак для IE */ _height: 250px; /*в IE6 не работает min-height*/

• Замечу, что на указанные строчки избирательно реагируют конкретные браузеры (на первую – Firefox, на остальные - IE).
Метод «Table»
Табличный подход долгое время был стандартом верстки, что в первую очередь объяснялось простотой и интуитивной понятностью разметки. Скорее всего, именно это и послужило причиной появления табличного форматирования в CSS.
Свойства display: table (table-cell , inline-table ), позволяют выполнять табличное форматирование элементов без применения HTML таблиц.
Для горизонтального размещения блоков нам понадобится родительский элемент, имеющий свойство display: table , и дочерние элементы (ячейки), имеющие свойство display: table-cell :

< div class = "wrap" > < div class = "bblock" > Строим < div class = "bblock" > табличный < div class = "bblock" > ряд < div class = "bblock" > из дивов
Bblock { display: table- cell; font- size: 32px; width: 200px; height: 200px; background: gold; text- align: center; vertical- align: middle; } . wrap { display: table; border- spacing: 20px 20px; background- color: darkgray; }
Важно!!!
1. В отличии от методов «Inline-block» и «float», при уменьшении ширины окна веб-браузера, ячейки не перемещаются вниз.
2. У вас нет возможности задавать свойство margin для ячеек псевдотаблицы.
3. Кросс-браузерность. Свойства из семейства display: table* не поддерживаются IE6, IE7. Кроме того, в IE8 вы можете наблюдать динамическую ошибку рендеринга псевдотабличных элементов в виде рандомно пропадающих ячеек. Данная ошибка чаше всего проявляется при первичной прорисовке документа