Почему не работает position absolute

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

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

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

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

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

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

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

Свойства 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 зависит от конкретной ситуации.

top: -5px; top: 0; top: 5px; top: 100%;

bottom: -5px; bottom: 0; bottom: 5px; bottom: 100%;

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

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

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

left: auto; left: 50%; left: 1em; left: 0; left: -1em;	right: auto; right: 50%; right: 1em; right: 0; right: -1em;
top: auto; top: 50%; top: 1em; top: 0; top: -1em;	bottom: auto; bottom: 50%; bottom: 1em; bottom: 0; bottom: -1em;

border: .5em solid fuchsia; padding: 1em;

Стили, чтобы растянуть блок на всю ширину и высоту родителя без border , но с position не static :

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

left: auto; left: 50%; left: 1em; left: 0; left: -1em;	right: auto; right: 50%; right: 1em; right: 0; right: -1em;
top: auto; top: 50%; top: 1em; top: 0; top: -1em;	bottom: auto; bottom: 50%; bottom: 1em; bottom: 0; bottom: -1em;

border: .5em solid fuchsia; padding: 1em;

Свойство 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 .

Источник

Некорректно работает position: absolute

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

Position: absolute не работает в IE 11
не знаю, как быть. не отображается текст и иконки в IE 11, которые абсолютно спозиционированны.

Почему position: absolute не работает
Есть следующий код: хочу наложить один блок на другой (сделать так для трёх разных пар блоков).

Я заметил что это из-за того что боди высотой с вьюпорт и не больше а у меня там скролл.

Добавлено через 2 минуты
Вот код:

Добавлено через 2 минуты

Добавлено через 1 минуту
То есть высота body и html определяется размером вьюпорта, а не содержимым

Добавлено через 10 секунд
А это плохо

Добавлено через 27 минут
Всё, решил, не знаю как, но работает нормально, закрывайте тему.

Как связать блоки position: absolute; и position: relative; ?
Имеется слайдер position: absolute;. Картинка слайдера уменьшается пропорционально при уменьшении.

Не могу разобраться с position-relative и position-absolute
Дано: в блоке со свойствами position-relative помещен блок со свойствами position-absolute. Вопрос.

ie position absolute
Здравствуйте. Есть блок td.image-td .speclabel-wrap < position: relative; >И у него.

IE 8 и position: absolute
Не работает это свойство на ie8 ,перепробовал уже все методы из гугла, и с доктайпами и с.

Position: Absolute.
Всем привет! У меня вопрос: можно ли каким-либо образом при изменении размеров окна броузера.

Ошибка с position: absolute
Ошибка такова: Текст не должен наслаиваться на картинку, но это происходит. Я же описал так, что.

Источник

Абсолютное позиционирование в CSS: понять раз и навсегда

Вы все еще не понимаете как работает абсолютное позиционирование в CSS и теряете элементы на экране? Давайте разбираться в этой магии.

Введение в позиционирование

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

Рассмотрим код с четырьмя дивами, вложенными друг в друга по принципу матрешки.

Блоки box-1 , box-2 и box-3 для красоты отцентрированы с помощью свойств margin: auto и свойств flex CSS. Блок box-4 остается в своей дефолтной позиции в потоке документа.

Все 4 элемента имеют позиционирование по умолчанию. На данный момент верстка выглядит следующим образом:

.box-4 без позиционирования

Относительно чего позиционируем?

Чтобы спозиционировать себя, элемент должен знать две вещи:

• какой родитель станет точкой отсчета;
• величину смещения относительно точки отсчета (сверху, снизу, справа или слева).

Если определить position: absolute для box-4 , этот элемент покинет нормальный поток документа. Но сейчас он остается на своем месте, так как координаты смещения не заданы. Если в CSS ширина элемента не определена, она будет равна ширине его содержимого (плюс паддинги и рамка).

.box-4 с абсолютным позиционированием без смещения

Теперь добавим свойства top: 0 и left: 0 . Элемент должен определить, какой родительский контейнер станет точкой отсчета для этих координат. Ей становится ближайший элемент с нестатической позицией (чаще всего position: relative ). box-4 начинает поочередно опрашивать своих предков. Ни box-3 , ни box-2 , ни box-1 не подходят, так как имеют позиционирование в CSS по умолчанию ( unset ).

Если позиционированный предок не нашелся, элемент размещается относительно тела документа ( body ):

.box-4 с абсолютным позиционированием. Родительские элементы без позиционирования

Если установить position: relative для элемента box-1 , точкой отсчета станет он:

.box-4 с абсолютным позиционированием. .box-1 с относительным позиционированием

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

Как только точка отсчета нашлась, все, что выше нее в DOM-дереве, перестает иметь значение.

Если установить position: relative также для box-2 , то box-4 будет позиционироваться относительно него, ведь этот предок ближе.

.box-4 с абсолютным позиционированием. .box-2 с относительным позиционированием

Аналогично и для контейнера box-3 :

.box-4 с абсолютным позиционированием. .box-3 с относительным позиционированием

А вот и наглядный красивый CSS-пример поиска позиционированного предка:

Источник

Форум

Справочник

Опции темы

Искать в теме

Добрый день надо сместить div кнопок относительно другого div сделал так

Обработчики нажатия кнопок добавил через JS

position надо absolute, так как блок кнопок совмещаю с картинкой и если поставить relative, то перед картинкой остается отступ(кстати при relative кнопки работают )

1) Почему при position:absolute; кнопки не работают
2) как этого избежать?

У элемента с position: absolute должен быть родитель с position: relative.
Возможно в этом причина.

Что если так изменить HTML:

Родитель есть и если ешё один добавить то все равно все так же,
кнопки смешаются как надо. Может область нажатия не смещаеться?
Сейчас крутил relative все тоже самое тоже кнопки не кликабельны становятся после того как подкрутить top, left в стилях.

Или когда через JS, устанавливаю событие clik, сильно рано, типа установил когда div располагался до смешения, а после он сместился.

pokk, у вас просто какой-то элемент (видимо невидимый) перекрывал вашу кнопку.

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

C помощью CSS-свойства z-index можно управлять тем, как перекрываются блоки. Значением этого свойства может быть целое число. Чем больше z-index, тем выше располагается блок.

Источник

Свойство position

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

position: static

Статическое позиционирование производится по умолчанию, в том случае, если свойство position не указано.

Его можно также явно указать через CSS-свойство:

Такая запись встречается редко и используется для переопределения других значений position .

Здесь и далее, для примеров мы будем использовать следующий документ:

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

Элемент с position: static ещё называют не позиционированным.

position: relative

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

Для того, чтобы применить относительное позиционирование, необходимо указать элементу CSS-свойство position: relative и координаты left/right/top/bottom .

Этот стиль сдвинет элемент на 10 пикселей относительно обычной позиции по вертикали:

Координаты

Для сдвига можно использовать координаты:

• top – сдвиг от «обычной» верхней границы
• bottom – сдвиг от нижней границы
• left – сдвиг слева
• right – сдвиг справа

Не будут работать одновременно указанные top и bottom , left и right . Нужно использовать только одну границу из каждой пары.

Возможны отрицательные координаты и координаты, использующие другие единицы измерения. Например, left: 10% сдвинет элемент на 10% его ширины вправо, а left: -10% – влево. При этом часть элемента может оказаться за границей окна:

Свойства left/top не будут работать для position:static . Если их все же поставить, браузер их проигнорирует. Эти свойства предназначены для работы только с позиционированными элементами.

position: absolute

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

1. Элемент исчезает с того места, где он должен быть и позиционируется заново. Остальные элементы, располагаются так, как будто этого элемента никогда не было.
2. Координаты top/bottom/left/right для нового местоположения отсчитываются от ближайшего позиционированного родителя, т.е. родителя с позиционированием, отличным от static . Если такого родителя нет – то относительно документа.

• Ширина элемента с position: absolute устанавливается по содержимому. Детали алгоритма вычисления ширины описаны в стандарте.
• Элемент получает display:block , который перекрывает почти все возможные display (см. Relationships between „display“, „position“, and „float“).

Например, отпозиционируем заголовок в правом-верхнем углу документа:

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

Так как при position:absolute размер блока устанавливается по содержимому, то широкий Заголовок «съёжился» до прямоугольника в углу.

Иногда бывает нужно поменять элементу position на absolute , но так, чтобы элементы вокруг не сдвигались. Как правило, это делают, меняя соседей – добавляют margin/padding или вставляют в документ пустой элемент с такими же размерами.

В абсолютно позиционированном элементе можно одновременно задавать противоположные границы.

Браузер растянет такой элемент до границ.

Как растянуть абсолютно позиционированный блок на всю ширину документа?

Первое, что может прийти в голову:

Но это будет работать лишь до тех пор, пока у страницы не появится скроллинг!

Прокрутите вниз ифрейм:

Вы увидите, что голубой фон оканчивается задолго до конца документа.

Дело в том, что в CSS 100% относится к ширине внешнего блока («containing block»). А какой внешний блок имеется в виду здесь, ведь элемент изъят со своего обычного места?

В данном случае им является так называемый (««initial containing block»»), которым является окно, а не документ.

То есть, координаты и ширины вычисляются относительно окна, а не документа.

Может быть, получится так?

С виду логично, но нет, не получится!

Координаты top/right/left/bottom вычисляются относительно окна. Значение bottom: 0 – нижняя граница окна, а не документа, блок растянется до неё. То есть, будет то же самое, что и в предыдущем примере.

position: absolute в позиционированном родителе

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

То есть, достаточно поставить родительскому div позицию relative , даже без координат – и заголовок будет в его правом-верхнем углу, вот так:

Нужно пользоваться таким позиционированием с осторожностью, т.к оно может перекрыть текст. Этим оно отличается от float .

Используем position для размещения элемента управления:

Часть текста перекрывается. Кнопка более не участвует в потоке.

Используем float для размещения элемента управления:

Браузер освобождает место справа, текст перенесён. Кнопка продолжает находиться в потоке, просто сдвинута.

position: fixed

Это подвид абсолютного позиционирования.

Позиционирует объект точно так же, как absolute , но относительно window .

Разница в нескольких словах:

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

В следующем примере, при прокрутке документа, ссылка #top всегда остаётся на своём месте.

Итого

Виды позиционирования и их особенности.

static Иначе называется «без позиционирования». В явном виде задаётся только если надо переопределить другое правило CSS. relative Сдвигает элемент относительно текущего места.

• Противоположные границы left/right ( top/bottom ) одновременно указать нельзя.
• Окружающие элементы ведут себя так, как будто элемент не сдвигался.

absolute

Визуально переносит элемент на новое место.

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

• Ширина элемента по умолчанию устанавливается по содержимому.
• Можно указать противоположные границы left/right ( top/bottom ). Элемент растянется.
• Окружающие элементы заполняют освободившееся место.

fixed

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

При прокрутке он остаётся на том же месте.

Почитать

CSS-позиционирование по-настоящему глубоко в спецификации Visual Formatting Model, 9.3 и ниже.

Ещё есть хорошее руководство CSS Positioning in 10 steps, которое охватывает основные типы позиционирования.

Задачи

Модальное окно

Создайте при помощи HTML/CSS «модальное окно», то есть DIV , который полностью перекрывает документ и находится над ним.

При этом все элементы управления на документе перестают работать, т.к. клики попадают в DIV .

В примере ниже DIV’у дополнительно поставлен цвет фона и прозрачность, чтобы было видно перекрытие:

Браузеры: все основные, IE8+. Должно работать при прокрутке окна (проверьте).

Если использовать position: absolute , то DIV не растянется на всю высоту документа, т.к. координаты вычисляются относительно окна.

Можно, конечно, узнать эту высоту при помощи JavaScript, но CSS даёт более удобный способ. Будем использовать position:fixed :

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

Источник