Как спозиционировать position:absolute?

Question

[Алекс]

Добрый день, возникла необходимость растянуть див на 100% по ширине с position:absolute на всю ширину окна браузера, учитывая что родитель фиксированного размера 1280px

Comments

[Вадим]

Вы попробовали сделать...?
И проблема заключается в...?

[Алекс]

Вадим, проблема заключается-абсолютное позиционирование растягивается внутри родителя(на ширину 1280) - что то пытался типа

position: absolute;
        top: 50%;
        width: 100vw;
        transform: translate(calc(-100vw + 80%), -50%);
        height: 100%;
        z-index: -1;
        left: 0;

[Алекс]

Вадим, https://codepen.io/djastrodeep/pen/dyQLrvb

[Вадим]

Алекс, ну вот это

width: 100vw;

уже указывает на жёсткий размер относительно вьюпорта. То есть элемент должен был стать больше своего родителя. Другой вопрос, что, возможно, у Вас у родителя, стоит overflow: hidden.
Не вижу у Вас нигде позиционирование слева или справа.

Ну и далее, если Вам нужно позиционирование относительно окна, может и стоит делать похзицинирование относительно окна, а не родителя?

[Алекс]

Вадим, надо именно относительно родителя) ну вот так там-вот и задаюсь вопросом.Просто чтоб на всю ширину было окна.

[Вадим]

а макет показать можете? А то может Вы не ту совсем проблему решаете или не так

[Сергей delphinpro]

Алекс,

.block {
    position: absolute;
    width: 100vw;
    left: 50%; /* левый край посередине */
    transform: translateX(-50%); /* весь блок влево наполовину */
}

Однако при использовании 100vw вертикальный скролл даст о себе знать и породит горизонтальный. В translateX нужно учесть ширину полосы прокрутки.

[Алекс]

Сергей delphinpro, Спасибо

[Алекс]

Спасибо всем за помощь

[leeroyjenkins176]

Алекс, вы можете задать position:relative не родителю, а элементу, относительно которого нужно позиционировать, к примеру, для body. Таким образом элемент с position: absolute наследует его ширину

Answer 1

[Максим Кукушкин]

Добрый день, вы можете использовать значение width: 100vw, для дочернего элемента. пример: https://jsbin.com/kipicuvaku/1/edit?html,css,output

.parent{
  position: relative;
  width: 1280px;
}

.child{
  position: absolute;
  width: 100vw;
}