Не выходит сверстать секцию?

Question

[Super Star]

Здравствуйте есть у меня вот такая секция
Применив z-index мне удалось сделать блоки как на макете jsfiddle.net/mmnoyjoL/5 , но у меня не выходит установить всю эту конструкцию по средине контейнера.

Подскажите каким образом можно реализовать это. Спасибо.

Answer 1

[Лучник *range attack +10*]

Сделайте блок c margin: 0 auto и и position: relative (top и left не прописывайте, только позишн), а у голубого блока укажите position: absolute и нужным положением. Но на вашем месте я бы голубой блок вообще сделал бы через :after, тогда можно белый не позиционировать вообще.

Comments

[Super Star]

https://jsfiddle.net/5qoc77ok/3/

[Лучник *range attack +10*]

Да нет же: cssdeck.com/labs/full/enm8go0u

[Super Star]

Константин Рафиков: огромное спасибище =)

[Лучник *range attack +10*]

Андрей Рысь: Не за что =)

[Лучник *range attack +10*]

А отметьте решением )

Answer 2

[Skrolea]

https://m.habrahabr.ru/company/netcracker/blog/277433/

Comments

[Super Star]

У меня оба блоки имеют абсолютное позиционирование. Я не могу выровнять их по середине контейнера. И убрать абсолютное позиционирование я не могу потому что не будет работать z-index.

[Skrolea]

Flex? Вы, получается, какой блок хотите по центру сделать? jsfiddle.net/TsarS/p5tk8xhu/2 Желтый?

[Super Star]

Skrolea: вот то что у меня вышло https://jsfiddle.net/5qoc77ok/3/ т.е. большой прямоугольник стоит по центру, а маленький(синий) который выполняет декоративную роль стоит за ним. Как видите используя псевдоэлемент мне удаётся добавить маленький блок только после col-md-11, но когда я начинаю сжимать сраницу он не двигается вместе с большим блоком а находится за ним. Я пытался с помощью z-index установить их друг за другом, но столкнулся с тем что не могу выровнять тогда блоки по центу.

Answer 3

[Руслан Шадура]

Посмотри в сторону flex

Answer 4

[Александр]

Полезное чтиво: frontender.info/centering-css-complete-guide

Answer 5

[metaf]

Не совсем понятно в чем проблема. Задавайте обертке ширину-высоту белого блока + padding с нужных сторон на размер выступов голубого блока и position relative или absolute, внутри один контейнер с position relative/absolute, второй - c absolute и bottom и right 0. А дальше уже позиционируйте обертку, а не два внутренних блока.

Ну как-то так codepen.io/olgar/pen/rLmRjv (вместо flexbox позиционирования можно выбрать любое другое, просто это самое быстрое).

Comments

[Super Star]

Проблема в том что у меня не получается как на скрине =) У меня вышло вот так https://jsfiddle.net/5qoc77ok/3/ получается с помощью псевдокласса я добавил блок поле col-md-11 и когда я сжимаю страницу он у меня соскакивает со своей позиции.

[metaf]

Андрей Рысь: ну так привязывайте его не к col-md-11 (зачем он вообще?) а к обертке с ограниченной шириной, которая будет расти в зависимости от содержимого в белом контейнере. Вы посмотрели ссылку в моему ответе?

[Super Star]

metaf: Я верстаю на бутстрапе поэтому и использую его сетку. Спасибо за совет

[metaf]

Андрей Рысь: ну тогда удачи в дальнейшей верстке. Только зачем тут вам бутстрап, наверное, известно только вам.