Позиционирование блоков div: Методы позиционирования элементов в CSS

Позиционирование элементов по разным сторонам блока / Хабр

Здравствуйте, дорогие читатели. Сегодня я расскажу вам о малоизвестном способе разнести два элемента по разным сторонам блока, в котором они находятся. Например вот так

До некоторого времени я, как и многие из вас, пользовался двумя способами:

1. Первый способ основан на свойстве float. Левому блоку задаётся float: left, правому float: right
2. Второй способ заключается в абсолютном позиционировании правого блока, с параметрами right: 0 либо left: 100%, margin-left: -(ширина блока)

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

Это необходимость очищать поток с помощью clearFix’a, overflow или дополнительного дива.
Итак способ номер 3. Для начала код:

Собственно HTML

Copy Source | Copy HTML

1. <div>
2.     <div><a href="#">Левый блок</a></div><div><a href="#">Правый блок</a></div>
3. </div>

Собственно CSS

Copy Source | Copy HTML

1. .wrap {
2.     width: 500px;
3.     background: #555;
4.     height: 500px;
5. }
6. .left, .right {
7.     display: inline-block;
8.     //display: inline;
9.     //zoom: 1;
10.     width: 100%;
11.     margin-right: -100%;
12.     vertical-align: bottom;
13. }
14. .right {
15.     text-align: right;
16. }
17. .left a, . right a { display: inline-block; position: relative; }
18. .left a { width: 200px; height: 100px; background: green; }
19. .right a { width: 100px; height: 200px; background: pink; }

Пояснения

Суть способа заключается в том, чтобы наложить блоки друг на друга посредством margin-right: -100% и содержимое правого блока выровнять по правому краю с помощью text-align: right.

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

Плюсы способа

Главный плюс в том, что теперь для наших блоков начинает работать vertical-align. И мы легко можем выровнять их и по верхней границе и по нижней и по центру.

Минусы способа

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

Ссылка на готовый пример

P.S.

Я не встречал такого способа в интернете, посему просьба: если кто-то найдёт аналогичную статью опубликованную раньше, сообщите мне пожалуйста.

Upd.

В комментариях моё внимание внимание обратили на способ, использующий text-align: justify. Этот способ тоже хорош, но у него есть два недостатка. Во-первых он требует введения дополнительного элемента, эмулирующего последнюю строку текстового блока, а во-вторых, он не будет работать в IE6-IE7 для блочных элементов.

CSS: position.

Примеры с позиционированием

Позиционирование задаётся с помощью свойства position. Свойство может иметь пять значений:

• static — нормальное (статичное) позиционирование
• relative — относительное позиционирование
• absolute — абсолютное позиционирование
• filxed — фиксированное позиционирование
• sticky — липкое позиционирование

Свойство position не наследуется, так что для дочерних элементов его требуется указывать явно.

Свойство z-index работает только для элементов, у которых position задано как relative, absolute или fixed.

Разобраться с отдельными видами позиционирования просто. Проблемы начинаются, когда начинаешь комбинировать разные стили. Если работаешь с позиционированием периодически, то многие детали забываются и приходится заново вспоминать тонкости. Эта статья и написана для подобных случаев.

Создадим заготовку — один контейнер, в котором разместим три блока.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        .parent{
            background-color: gray;
			width: 400px;
        }
		.child{
            height: 50px;
        }
        .child-one {
            background-color:aqua;
        }
        .child-two {
            background-color: honeydew;
        }
        .child-three{
            background-color: burlywood;
        }
    </style>
</head>
<body>
    <div>
        I am a parent
        <div>First Child</div>
        <div>Second Child</div>
        <div>Third Child</div>
    </div>
    
</body>
</html>

Нормальное (статичное) позиционирование — это обычное поведение блочных элементов в том порядке, в котором они прописаны в коде сверху вниз. Его не нужно прописывать, потому что оно стоит по умолчанию. Но иногда position: static используют, чтобы отменить другой вид позиционирования при определённых событиях на веб-странице в сценариях JavaScript или в эффектах CSS для возврата к начальному значению (например, в свойстве :hover).

Для нормального позиционирования характерны следующие особенности:

• элементы выводятся в том порядке, как они описаны в коде
• свойства left, right, top, bottom, z-index не работают, применять их нет смысла

Наша заготовка как раз использует нормальное позиционирование и здесь всё понятно.

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

Относительное позиционирование записывается так – position: relative. Изменяет положение элемента от его исходного расположения. Координаты задаются такими же свойствами, как и при абсолютном позиционировании —

left, right, top, bottom. Единственное существенное отличие заключается в том, что элемент формально не выпадает из потока – под него остаётся место.

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

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

Помните, что смещение происходит не от краёв окна браузера, а от того места, где изначально стоял блок.

Допустим мы хотим сместить первый дочерний элемент влево и вниз.

.child-one {
    background-color:aqua;
    position: relative;
    left: 20px;
    top: 10px;
}

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

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

При задании подобного позиционирования элемент перестаёт существовать в потоке документа и его положение задаётся относительно краёв браузера или родительского окна.

Ширина элемента, если она не задана явно, определяется шириной содержимого с учётом padding, border и margin. Элемент не меняет своё исходное положение, если у него нет свойств right, left, top и bottom. Одновременно указанные свойства left и right формируют ширину элемента, но только если width не указано. Если добавить свойство width, то значение right будет проигнорировано. Аналогично с высотой элемента при использовании свойств top, bottom и height.

Свойства

left и top имеют более высокий приоритет по сравнению с right и bottom. Если left и right противоречат друг другу, то значение right игнорируется. То же самое касается и bottom.

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

Если left задать значение больше ширины видимой области или указать right с отрицательным значением, то появится горизонтальная полоса прокрутки. Аналогично и с top — появится вертикальная полоса прокрутки.

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

Абсолютное позиционирование позволяет скрывать элементы. Для этой цели часто добавляется стиль left: -9999px, который переносит элемент далеко влево за область просмотра. В частности, этот приём используется для стилизации переключателей и флажков, когда скрывают настоящий флажок, а вместо него стилизуют элемент label, связанный с input и выполняющим его функции.

Применим абсолютное позиционирование к первом блоку.

.child-one {
    position: absolute;
}

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

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

.child-one {
    position: absolute;
    top: 5px;
    left: 5px;
}

Сюрприз! Блок разместился в указанной позиции относительно окна браузера, а не своего родительского контейнера, так как на самом деле блок выпал из него. Это справедливо, если родительский блок имеет статичное позиционирование (static), которое в нашем случае опущено, так как используется по умолчанию.

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

.parent{
    position: relative;
}

Запоминаем связку: родитель (относительное) — дочерний (абсолютное). По умолчанию перемещение происходит относительно сторон окна браузера, но если у родительского элемента задано position: relative, то произойдёт смена системы координат и смещение происходит относительно родительского блока. Значения padding не учитываются.

На самом деле, родительский блок мог иметь любые другие значения, кроме static. Если попробовать связку absolute-absolute, то ничего не изменится.

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

.child-one {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 40px;
    height: 40px;
}

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

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

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

.child-one {
    position: fixed;
    top: 5px;
    left: 5px;
}

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

Также может использоваться для вывода диалоговых окон — при этом фиксированное сообщение невозможно прокрутить вверх или вниз, оно всегда остаётся на своём месте.

Липкое позиционирование — sticky

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

.child-one {
    position: sticky;
    top: 5px;
    left: 5px;
}

Реклама

Блоки Div (теги) — абсолютное, относительное и фиксированное положение

Учебник Wickham по HTML и CSS

Карта сайта | Главная | Поиск

Просмотр в Firefox, Safari, Opera и IE, но IE6 часто требует других решений. В целом IE7 и IE8 отображаются так же, как Firefox, за исключением функций HTML5 и CSS3. Обновления IE9 и выше в основном связаны с проблемами HTML 5 и CSS3 и в значительной степени отображаются так же, как и другие основные браузеры. Google Chrome основан на том же движке WebKit, что и Safari.

Некоторые примеры приведены только для демонстрации проблем, другие показывают решения, которые работают в большинстве основных браузеров. Используйте тот пример, который вам подходит.
 проблемы    предупреждение: работает в некоторых ситуациях или некоторых браузерах или требует осторожности для отображения по вашему желанию    ОК в Firefox, Safari, Opera, Google Chrome и IE

---

Пять свойств позиции

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

Позиция: статическая; по умолчанию, где, если у него нет верхней, правой, нижней или левой позиций, блочный элемент просто следует в порядке кода и начинает новую строку. Обычно нет необходимости указывать position: static, если вы не хотите отменить одно из других свойств. [Встроенные элементы будут на одной строке, если есть место, а положение не применяется].

Используйте «Просмотр», «Исходный код» или щелкните правой кнопкой мыши и «Исходный код страницы» в большинстве браузеров, чтобы увидеть код для следующих примеров.

---

Divs с позицией: абсолютная;

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

положение: абсолютное; верх: 70 пикселей; слева: 255 пикселей; ширина: 240 пикселей; цвет фона: лазурный; общая ширина 248px, включая отступ 2*3px и границу 2*1px; (без высоты)

положение: абсолютное; верх: 10 пикселей; слева: 3px; ширина: 240 пикселей; высота: 150 пикселей; цвет фона: розовый; общая ширина 248px, включая отступ 2*3px и границу 2*1px

положение: абсолютное; верх: 25 пикселей; слева: 507 пикселей; ширина: 210 пикселей; высота: 125 пикселей; цвет фона: желтый; общая ширина 218px, включая отступ 2*3px и границу 2*1px

Код CSS в основной таблице стилей:

• div { padding: 3px; граница: 1px сплошной черный; }
• . background {цвет фона: #c0c0c0; заполнение: 0; цвет: #335500; }

Код разметки HTML: —

<дел>
<дел>
положение: абсолютное; верх: 70 пикселей; слева: 255 пикселей; ширина: 240 пикселей; цвет фона: лазурный; общая ширина 248px, включая отступ 2*3px и границу 2*1px; (без высоты)

<дел>
положение: абсолютное; верх: 10 пикселей; слева: 3px; ширина: 240 пикселей; высота: 150 пикселей; цвет фона: розовый; общая ширина 248px, включая отступ 2*3px и границу 2*1px

<дел>
положение: абсолютное; верх: 25 пикселей; слева: 507 пикселей; ширина: 210 пикселей; высота: 125 пикселей; цвет фона: желтый; общая ширина 218px, включая отступ 2*3px и границу 2*1px