CSS Как правильно верстается такое, когда элементы выходят за каркас?

Question

[html-css]

CSS Как правильно верстается такое, когда элементы выходят за каркас но при этом они прилипшие к центру каркаса и растягиваются до самого края body
надеюсь понятно описал

Comments

[iBird Rose]

отрицательный margin

Answer 1

[Rustam Bainazarov]

Абсолютное позиционирование внутри контейнера-якоря + vw:

Answer 2

[Andrej Sharapov]

CSS/transform

Comments

[html-css]

пример показать никак?
то что вы кинули, вообще не то

[Andrej Sharapov]

пример? почитайте документацию, поймете. Вы можете использовать margin: -**px/%;, но лучше использовать транформацию. какую - найдете в доках.

[WapSter]

Andrej Sharapov, тут трансформация не совсем уместна, так как картинка, превышает размеры контейнера, и блок картинки просто сместиться за пределы контейнера, не изменив параметр ширины. Ну возможно я всего на этот счёт не знаю, но буду благодарен если вы объясните.

Answer 3

[Дима Долготер]

Теперь все тянется. если что, просто % подшамань

Радуйся

Comments

[Rustam Bainazarov]

Элементы не растягиваются до края окна.

[Дима Долготер]

Рустам Байназаров,
переделывать 10 сек

[Rustam Bainazarov]

SpiderPigAndCat, тоже не так. Там надо на vw, как в моём примере. Если там будет не цвет, а картинка, она будет на все 300% расстягиваться. А если там будет ещё и контент — сами понимаете.

Answer 4

[Vyach Gor]

Решение для блоков без absolut и transform - link
Вот только для bacground-color центрального блока все равно придется костылить доп блок по центру с тем же absolut

Answer 5

[Aidarkhan]

По мне самый нормальный вариант это для основного блока дать position: relative, и его псевдоэлемент ::before позиционировать абсолютно. Далее цвет псевдоэлемента серый, ширина 70%, высота 100%, top: 0, left: 0, right:0, margin: auto, это чтобы центрировать, z-index:-1, чтобы псевдоэлемента был за контентом. И все, не надо будет позиционировать элементы выходящие за блок. Визуально будет казаться что они выходят, но на самом деле будут так же внутри основного блока.
ПС, основной блок здесь блок с белым фоном, а серый должен быть его псевдоэлементом