Как избавиться от родителя в CSS?

Question

[Капитан Какао]

Есть 2 блок div. Один вложен в другой.
В первого position:absolute, у второго то же самое.

Как сделать так, что бы второй растягивался на 100%, но отсчёт шёл не от родительского div а от края экрана.
При этом структуру HTML кода менять нельзя, вложенность и абсолютное позиционирование обеих дивов обязательно.

Реально ли это как-то сделать, z-index тут не помогает.

Вот пример кода.
Нужно что бы красаня полоска растягивалась на всю область окна.

Comments

[Дмитрий Куликов]

Можно воспользоваться js

[Капитан Какао]

Дмитрий Куликов: а конкретнее, в js не силён.
ЖЕлательно на квэри если что пример.

[SergPro]

Жосткий заголовок))

[Капитан Какао]

SergPro: :D

Answer 1

[Виталий Инчин ☢]

А простейший математический расчет провести не судьба?
Родитель = 80% => (100-80=20) это четверть от 80 =>
Дочерний нужно сделать 125%, то есть 100+100/4

Далее сместить влево на 25%... и соответственно прибавить к ширене еще 25%

Клац

Comments

[Капитан Какао]

Благодраю!)

Answer 2

[SergPro]

Интересное свойство, раньше не замечал даже: position: absolute не позволяет всем вложенным элементам иметь полноценное position: static (оно будто игнорируется) и делает поведение по умолчанию как у position: relative.

Попробовал обернуть в position: fixed - не помогло: все элементы внутри так же фиксируются

Тут уже привели решение, но поправлю "математику": блок стал при 125% равен ширине экрана, теперь нам нужно вынести его на одинаковое расстояние с той и с другой стороны от родителя: 25%=12,5+12,5.

Answer 3

[lnked]

а если попробовать так и для блока в котором находятся оба дива сделать оферфлоу хидден что бы не появлялся горизонтальный скролл

Comments

[Капитан Какао]

Интересная идея, попробую сейчас для своих потребностей использовать.
Хотя надеюсь, что всё же есть какой-то вариант по лучше)