Мы принимаем к оплате:

«Подарочный сертификат» от нашего Учебного Центра – это лучший подарок для тех, кто Вам дорог! Оплате обучение и подарите Вашим родным и близким обучение по любому из курсов!!!

«Сертификат на повторное обучение» дает возможность повторно пройти обучение в нашем Учебном Центре со скидкой 1000 рублей!

А также:

В css position relative

CSS position: absolute | relative ??

Недавно начал использовать блочную верстку и возникли такие трудности: FF и IE отображают одинаково по своему, Opera по своему, создавая какие то отступы. Решение, как оказалось слишком банальным (для родительского блока, нужно было поставить position): div#parent { position: relative; width: 1000px; } div#child1 { position: absolute; top: 50px; left: 50px; } div#child2 { position: absolute; top: 200px; left: 120px; } (etc) Хотел бы уточнить у верстальщиков: Ну никак не получается. В картинке визуально указал пример, какой мне нужен.

Лучше статьи про блочную верстку, либо примеры. Т.к. я в инете не нашел нужной информации.

Теги:

блочная вёрстка
opera - своё видение

Как работает position: absolute;

Элемент с position: absolute; смещается на расстояние, указанное в свойствах top, right, bottom, left, от края ближайшего родителя с position не static. Передвинуть его относительно своего расположения можно с помощью margin и transform. Размещение элемента над другими элементами правится с помощью свойства z-index.

После того, как свойство position примет значение absolute, размер элемента может измениться, а соседние элементы сдвинутся на освободившееся пространство.

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

Элемент с position: absolute; не влияет на размер родителя.

Элемент с position: absolute; не влияет на положение соседей: цифры 20, 21, 22, … смещаются к цифре 19.

top

bottom

родительский элементposition: relative;

дочерний элемент position: absolute;

left

right

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

Если свойство border задано ближайшему родителю с position не static, то элемент смещается относительно внутреннего края рамки, созданной этим свойством.

Значения свойств top и bottom в процентах рассчитываются от высоты за минусом border-top-width и border-bottom-width ближайшего родителя с position не static. Значения свойств left и right в процентах рассчитываются от ширины за минусом border-left-width и border-right-width ближайшего родителя с position не static.

Использование свойств top или bottom, left или right зависит от конкретной ситуации.

Ширина и высота элемента с position: absolute; относительно размера ближайшего родителя с position не static

Ширина элемента с position: absolute; без явно заданного значения устанавливается по содержимому. Элементы с display не block и position: absolute; ведут себя как элементы с display: block; и position: absolute;.

Без явно заданной ширины и/или высоты размер элемента определяется расстоянием от left не auto до right не auto и/или от top не auto до bottom не auto .

Стили, чтобы растянуть блок на всю ширину и высоту родителя без border, но с position не static: left: 0; right: 0; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; box-sizing: border-box;

С ограниченной шириной и/или высотой расстояние от left не auto до right не auto и/или от top не auto до bottom не auto определяет область, в рамках которой может перемещаться элемент с margin: auto; . Если расстояние от left не auto до right не auto меньше width, то свойство right игнорируется .

Свойство height в процентах не заменяется на height: auto;, даже когда ближайший родитель имеет height: auto;.

Блок с position: absolute; внутри ближайшего родителя с position не static и overflow не visible

Значение overflow отличное от visible у ближайшего родителя с position не static прячет выходящую за границы часть дочернего элемента с первого экрана видимости. Если у ближайшего родителя с position не static и overflow: auto; не ограничена ширина и высота, то при соответствующем direction появляется полоса прокрутки, которая изначально скрывает только выступающий элемент с position: absolute;.

Позиционирование вложенного элемента относительно родителя

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

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

Родитель с position: static; и overflow не visible, стоящий внутри позиционированного родителя, не прячет содержимое потомка с position: absolute;.

Свойства width, margin и padding в процентах рассчитываются от ширины за минусом border-left-width и border-right-width ближайшего родителя с position не static.

5 вещей, которые вы не знали о типах позиционирования CSS

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

Обзор доступных типов позиционирования CSS

Свойство CSS position позволяет задать тип позиционирования элемента.

Параметры позиционирования CSS

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

Для этого мы задаем одно из следующих значений:

position relative CSS;
absolute;
fixed;
sticky.

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

top;
right;
bottom;
left.

Начальное значение этих свойств — auto.

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

Основные отличия свойств позиционирования CSS

Кратко рассмотрим три основных различия между доступными типами позиционирования:

Абсолютно позиционированный элемент полностью удаляется из нормального потока. Соседние элементы того же уровня занимают его пространство;
За элементами с CSS position relative или stickily сохраняется их пространство. Соседние элементы не могут занимать пространство, отведенное для него. Но под смещение этого элемента не отводится места. Смещения полностью игнорируются, и в результате элементы могут накладываться друг на друга;
fixed (подкатегория абсолютного позиционирования) — всегда позиционируется относительно окна просмотра. За исключением родительского элемента, который имеет свойство transform. Последние версии всех браузеров поддерживает такое поведение;
sticky – элемент позиционируется относительно ближайшего родительского элемента с полосой прокрутки. Если такой родительский элемент отсутствует, то позиционирование происходит относительно окна просмотра.

Как работают все эти типы, можно увидеть в следующем демо:

Посмотреть демо

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

Позиционирование элементов с типом absolute

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

В приведенной ниже демо-версии проиллюстрировано данное поведение:

Посмотреть демо

В примере мы задаем зеленому полю тип позиционирования absolute со значением смещения bottom:0 и left:0. Кроме этого мы не указываем тип позиционирования для его прямого родителя (красное поле).

В то же время мы позиционируем относительно элемент с классом jumbotron. Обратите внимание, как положение зеленого поля изменяется по мере того, как мы меняем тип позиционирования родительского элемента.

Абсолютно позиционированные элементы игнорируют свойство float

Если элемент перемещается влево или вправо, и при этом мы устанавливаем для него тип позиционирования absolute или fixed, то значение свойства float становится равным none. Но если мы устанавливаем тип позиционирования position relative CSS, элемент остается плавающим.

Посмотрите приведенное ниже демо:

Посмотреть демо

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

Встроенные элементы, позиционированные абсолютно, ведут себя как блочные элементы

Встроенный элемент, который позиционирован, как absolute или fixed, приобретает характеристики элементов уровня блока.

Посмотреть пример

Мы определяем два различных элемента. Первый из них (зеленое поле) является блочным элементом (т.е. div). Второй (красное поле) является встроенным элементом (span). Обратите внимание, что у нас отображается только зеленое поле.

Красное поле не видно, потому что мы задаем для него свойства width и height, которые могут быть применены только к блочным и встроенным блочным элементам. И это пустой элемент (т.е. он не содержит вложенных или дочерних элементов).

Если мы устанавливаем для него тип позиционирования absolute или fixed, элемент становится видимым, потому что ведет себя как блочный элемент.

У абсолютно позиционированных элементов поля не объединяются

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

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

Рассмотрим следующий пример:

Посмотреть демо

В этой демо-версии элемент изначально имеет поля 20px. Кроме этого его верхнее поле объединяется с верхним полем родительского элемента, которое также равно 20px. Как видите, верхнее поле не объединяется с соответствующим полем родительского элемента только тогда, когда мы позиционируем элемент абсолютно, а не CSS position relative top left.

Чтобы предотвратить объединение полей, нужен небольшой отступ или рамка. Мы должны применить это правило к родительскому или дочернему элементу. Другой вариант — добавить класс clearfix (в нашем примере) для родительского элемента.

Позиционирование элементов в пикселях и процентах

Вы когда-нибудь использовали проценты вместо пикселей для CSS position relative по центру? Если да, то вы заметили, что вычисленные значения смещения различны в зависимости от единиц измерения CSS (пикселей или процентов), которые вы используете.

Посмотрим, что говорится о смещениях, которые объявляются в процентах, в спецификации:

Смещение – это процент от ширины (для left или right) или высоты (для top и bottom) блока, содержащего элемент. Для элементов с позиционированием stickily смещение представляет собой процент от ширины (left или right) или высоты (для top и bottom) окна. Допускаются отрицательные значения. Когда мы определяем значение смещения в процентах, положение целевого элемента зависит от ширины (для смещения left или right) и высоты (для смещения top и bottom) его родительского элемента.

Приведенное ниже демо иллюстрирует эту разницу:

Посмотреть демо

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

Но когда мы используем для смещений проценты, позиция элемента зависит от размеров его родительского элемента. На приведенном ниже рисунке показано, как вычисляется новое положение CSS position relative (в процентах):

Примечание: Свойство transform (вместе с различными функциями translate) также позволяет изменить положение элемента. Но если мы будем использовать проценты, элемент будет позиционироваться относительно своих размеров, а не относительно размеров родительского элемента (в отличие от смещений).

Заключение

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

Перевод статьи «5 Things You Might Not Know About the CSS Positioning Types» был подготовлен дружной командой проекта Сайтостроение от А до Я.

Свойство position в CSS

Версия для печати

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

Элементы могут быть позиционированы с помощью свойств top, bottom, left и right. Однако эти свойства не работают без назначенного свойства position. Они также работают по-разному в зависимости от указанного свойства position в CSS.

Существует четыре способа позиционирования элементов.

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

По умолчанию все HTML элементы имеют статическое позиционирование.

.element_static { position: static;

}

На элементы с таким позиционированием свойства top, bottom, left и right никак не влияют.

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

Элементы с фиксированным позиционированием располагаются относительно окна браузера.

Они остаются на своих местах даже при скроллинге окна:

p.element_fixed { position: fixed; top: 30px; right: 5px; }

Замечание: IE7 и IE8 поддерживают фиксированное позиционирование только при указанном !DOCTYPE.

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

Элементы со свойством position = fixed могут перекрывать другие элементы.

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

Элементы с относительным позиционированием располагаются относительно своей нормальной (статичной) позиции в документе:

h3.pos_left { position: relative; left: -20px; } h3.pos_right { position: relative; left: 20px; }

Содержимое элемента с position = relative может быть перемещено и перекрыто другими элементами, но место, зарезервированное за этим элементом, будет оставаться в основном потоке документа:

h3.pos_top { position: relative; top: -50px; }

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

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

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

h3 { position: absolute; left: 100px; top: 150px; }

Документ и другие элементы ведут себя так, как будто элементов с абсолютным позиционированием не существует. Элементы со свойством position = absolute могут перекрывать другие элементы.

Перекрываемые элементы

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

Свойство z-index определяет порядок перекрытия элементов (какой элемент должен быть помещен впереди остальных, какой сзади и т.д.).

Элемент может иметь как положительное, так и отрицательное значение свойства z-index:

img { position: absolute; left: 0px; top: 0px; z-index: -1; }

Элемент с бОльшим значением z-index всегда располагается над элементом с меньшим значением. Замечание: если два элемента перекрываются и у них не указано свойство z-index, то элемент, находящийся дальше в HTML коде, располагается выше.