Как растянуть элемент на всю ширину, если у родителя задан position: relative?

Question

[Jay Orson]

Всем привет!
Сильно не пинайте - нигде не нашел как сделать, все что знал - перепробовал.

Задача. Есть два блока, вложенных друг в друга. У первого блока position: relative, у внутреннего absolute. Так же, у первого стоит ограничение по ширине. Не меняя два эти атрибуты, внутренний блок нужно растянуть на всю ширину браузера. Может кто подскажет, как сделать :)

<div class='first-block'>
  <div class='second-block'>
    HELLO WORLD!
  </div>
</div>

.first-block {
  width: 400px;
  height: 200px;
  position: absolute;
}
.second-block {
  width: 100%;
  height: 100px;
  position: absolute;
}

Сам пример здесь - codepen.io/orson/pen/QjJvaV

Comments

[Andrey Dyrkov]

позиции нельзя менять? и ширену у первого?

Answer 1

[L0k1]

Дич конечно)
Ну задай внутреннему ширину 100vw

Comments

[Jay Orson]

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

[L0k1]

Jay Orson: понятное дело. Но ты сам загнал себя в рамки условиями, так что имеем, что имеем.

Answer 2

[Andrey Dyrkov]

Если можно менять отображение у второго блока то лучше отображать его как fixed, тогда размеры будут заданы относительно body. Если чётко вложены друг в друга, и нельзя менять позиции то вы неправильно верстаtте, такой задачи не должно было даже появиться. Вам нужен блок который будет занимать всю ширину браузер, вы можите его запихнуть в корень где relative будет указывать на body либо из любой вложенности но fixed. Возможно может что-то получитья если использовать flexbox но я его не знаю)

Comments

[Jay Orson]

Flexbox здесь не поможет. По сути, в самом решении для обоих элементов я его и использую)) Задача в разработке меню и вложенных в него списков. Но, пожалуй, вы правы. При абсолютном позиционировании я использую часть ограничения для показа элемента в нужном месте, при этом пытаюсь обойти другую его часть. Судя по всему, единственное решение указывать абсолютную ширину в пикселях и использовать медиа запросы.