Как спозиционировать position:absolute?
уже указывает на жёсткий размер относительно вьюпорта. То есть элемент должен был стать больше своего родителя. Другой вопрос, что, возможно, у Вас у родителя, стоит overflow: hidden.
Не вижу у Вас нигде позиционирование слева или справа.
Ну и далее, если Вам нужно позиционирование относительно окна, может и стоит делать похзицинирование относительно окна, а не родителя?
Алекс @astrodeep Автор вопроса
Вадим, надо именно относительно родителя) ну вот так там-вот и задаюсь вопросом.Просто чтоб на всю ширину было окна.
Вадим @MrDecoy Куратор тега CSS
а макет показать можете? А то может Вы не ту совсем проблему решаете или не так
Сергей delphinpro @delphinpro Куратор тега CSS
.block < position: absolute; width: 100vw; left: 50%; /* левый край посередине */ transform: translateX(-50%); /* весь блок влево наполовину */ >Однако при использовании 100vw вертикальный скролл даст о себе знать и породит горизонтальный. В translateX нужно учесть ширину полосы прокрутки.
Позиционирование absolut элемента относительно родительского
Как спозиционировать элемент с position: absolute внутри другого такого же элемента с position: absolute. Если не указывать left, top, то элемент выводится чуть ниже родительского. Мне нужно его немного сместить. Указав left и top можно расположить элемент по указанным координатам, но теряется связь с родительским. И всё это сделать без JavaScript. С JS вопроса бы и не возникло. Теперь чуть подробнее. Может и изобретаю велосипед, но мне нужно было сделать многоуровневое popup меню. Конечно, я искал уже готовые решения, но ничего подходящего не было. Сейчас это реализовано, буквально, 2-3 небольшими классами. Проблема в том, что подменю отображается ниже родительского элемента, перекрывая остальные. Сменить position на relative нельзя — тогда подменю будет занимать место в основном меню. Координаты определить нельзя — они непостоянные. И повторюсь ещё раз — без использования JavaScript. Возможно ли сделать такое?
Отслеживать
задан 26 ноя 2015 в 10:31
612 5 5 серебряных знаков 14 14 бронзовых знаков
26 ноя 2015 в 10:41
Родительский элемент не имеет фиксированного местоположения. Иначе можно было бы задать и left, top подменю. В этом и загвоздка. Родительское меню появляется пр наведении (:hover) на определённый элемент, который можно установить в любом месте страницы. При наведении на пункт с подменю, нужно его показать, чтобы оно не перекрывало остальные. Могу сказать, что если задать left, то всё хорошо — подменю показывается относительно родительского. А вот, с top такой фокус не прошёл.
26 ноя 2015 в 10:48
Хм, я, кажется, не так понял пример. Это может быть хорошим решением. Спасибо, попробую применить его.
CSS свойство position
Свойство position помогает управлять расположением элементов на странице. Например, следующие инструкции:
.element
сместят элемент относительно своего исходного положения вниз на 10px.
Синтаксис
position: static | absolute | relative | fixed | sticky | inherit Свойство может применяться вместе с указанием отступа от краев контейнера (левого, нижнего, правого, верхнего).
Например, создадим два контейнера, родительский (parent) – в синей рамке и дочерний (element) внутри него. Для дочернего элемента установим относительное позиционирование relative и сдвиги сверху и слева по 10px.
.element
Результат выполнения видно ниже.
Значения
Свойство position может принимать следующие значения:
static По умолчанию каждый элемент имеет положение static , при котором он находится в обычном потоке страницы. Если установлено, то применение left , top , right и bottom не имеет никакого воздействия. absolute Элемент удаляется из потока документа, а другие блоки будут вести себя так, как будто его нет. Положение блока определяется значениями top , right , bottom , и left . Блок расположится как бы поверх всех элементов. Учтите, что на местоположение влияет значение свойства position его предка. Позиционирование идет от ближайшего предка со значением position не равном static . Если такого не найдется, отсчет координат идет от документа. relative Позиционируется обычным образом, а затем смещается относительно своей позиции в соответствии со значениями top , right , bottom и left . Такое смещение не влияет на местоположение других элементов. fixed При указании этого значения элемент привязывается к точке на экране, указанной значениями left , top , right и bottom , при этом блок не меняет своего положения при прокрутке документа. sticky Экспериментальное свойство – элемент обрабатывается как имеющий относительное положение до тех пор, пока положение прокрутки области просмотра не достигнет указанного порога, после чего блок занимает фиксированное положение, в котором он и остается. inherit Это значение можно использовать, чтобы принудительно заставить наследовать значение позиционирования от его предка.
Координаты
Для сдвига можно использовать четыре координаты:
- top – сдвиг от верхней границы
- bottom – сдвиг от нижней границы
- left – сдвиг слева
- right – сдвиг справа
Не будут работать одновременно указанные top и bottom , left и right . Нужно использовать только одну границу из каждой пары.
В качестве указания значений можно использовать принятые в CSS единицы измерения: px, em и т.п., а также проценты. Так, left: 10% сместит элемент на 10% его ширины вправо.
Возможны отрицательные координаты. При смещении часть элемента может оказаться за границей контейнера или документа.
Рассмотрим их работу подробнее на примерах.
Абсолютное позиционирование
Если дочерний элемент имеет абсолютное значение, то родительский будет вести себя так, как будто дочернего вообще нет. Элемент позиционируется относительно своего ближайшего предка, который не является static . Если такого не найдется, тогда он спозиционируется относительно страницы.
Создадим два блока. При этом для предка не будем устанавливать position , а для дочернего зададим:
div.element
В результате видим, что элемент расположился относительно всего документа (прижался к его низу), а не своего предка.
Таким образом для корректного положения нужно задать позиционирование для предка. Например:
.parent
Теперь свойства top , bottom , left , right соотносятся с предком и видно, как изменилось положение элемента – получилось прижать элемент к низу блока-родителя.
- Ширина элемента с position: absolute устанавливается по содержимому.
- Элемент получает свойство display:block .
Фиксированное позиционирование
Значение fixed по воздействию похоже на абсолютное позиционирование. Оно поможет расположить элемент в любом месте документа, но это расположение не будет меняться при прокрутке документа. Посмотрите на поведение дочернего элемента на демонстрации ниже, на то, как при прокрутке он продолжает оставаться внизу страницы.
Для закрепления блока внизу экрана использовалось bottom , и точно также вы можете поднять его вверх используя свойство top .
При position , установленном в значения absolute или fixed , свойство display по умолчанию устанавливается в block , а float — в none .
“Липкое” позиционирование
Sticky можно перевести как “липкий”. Это некий компромисс между относительным и фиксированным значениями. На текущий момент это экспериментальное значение и не является частью официальной спецификации. Оно лишь частично поддерживается некоторыми браузерами. Поэтому, вероятно, пока не стоит использовать его на рабочих проектах.
Что оно делает? Позволяет позиционировать элемент относительно чего-либо в документе, а затем, когда пользователь прокручивает определенную точку в области просмотра, фиксирует положение элемента в этом месте, чтобы он оставался постоянно отображаемым, как фиксированный. Проще понять его работу взглянув на пример ниже.
Sticky элемент «прилипает» к своему ближайшему предку с прокруткой, созданной при overflow равном hidden , scroll , auto или overlay , даже если тот не является ближайшим фактически прокручивающим родителем.
.element
Здесь элемент будет располагаться относительно, пока при прокрутке области просмотра его положение не достигнет точки, в которой он будет находиться на расстоянии 30px от верха области просмотра. В этот момент он станет липким и остается в фиксированной позиции 30 пикселей вверху экрана.
Следующий пример демонстрирует иллюстрирует момент, где первое меню навигации имеет относительное позиционирование по умолчанию, а второе меню настроено на закрепление в самом верху области просмотра. Этот пример будет работать в Chrome, Safari и Opera, а в остальных браузерах только если они уже доработали его поддержку.
How to position absolute inside a div?
I’m having a strange problem positioning a set of divs inside another div. I think it will be best to describe it with an image: Inside the black (#box) div there are two divs (.a, .b) that have to positioned in the same place. What I’m trying to achieve is pictured in the first image, second one is the effect I get. It looks like if the divs were floated without clearing or something, which is obviously not the case. Any ideas would be welcome! Here’s the code for this sample: CSS:
#box < background-color: #000; position: relative; padding: 10px; width: 220px; >.a < width: 210px; position: absolute; top: 10px; left: 10px; background-color: #fff; padding: 5px; >.b < width: 210px; position: absolute; top: 10px; left: 10px; background-color: red; padding: 5px; >#after
Lorem Lorem Hello world