Можно ли во Flex позиционировании накладывать блоки друг на друга?

Question

[Тимур]

Есть родительный div block1, внутри него есть другие элементы, можно ли как-то с помощью flex'a раскидать элементы так чтоб они накладывались друг на друга и в строку?



На картинке видно структуру кода, без использования z-index это как-то можно сделать? Я сделал с помощью z-index и margin-left отрицательное число.

Может есть какой-то более правильный вариант во flex? Чтобы в дальнейшем при уменьшении экрана все не выходило за пределы родительного блока и не получалась каша.

Comments

[Вадим]

1) А почему нельзя объединить картинки в одну? Зачем отдельно мёд, отдельно пчёл?
2) Зачем тут вообще flex?
3) Изображение скорее фоновое, чем контентное.

[Тимур]

Вадим, это самый простой вариант(все в одну картинку скинуть), для практики это должно быть все отдельно, поэтому ищу варианты как это можно сделать

[Ankhena]

Тимур, странные идеи. Сейчас вы используете сдвиги с помощью margin, причем на фикс размер. К позиционированию флексами это не имеет никакого отношения.
Так что для практики флексов это не поможет.

В этой секции практикуйте лучше гриды и псевдоэлементы.
Пчел и мед - фоном псевдоэлемента. Но лучше всё таки одной картинкой.

[Тимур]

Ankhena, просто такое задание, надо именно отдельными элементами это все закинуть, я тоже хотел простокак задний фон это все залить, но решил не мухлевать и сделать честно)). Есть ли какойто вариант или свойство чтоб я мог закидывать в родительном блоке (flex) другие блоки. У меня еще есть как вариант через position absolute и просто сместить так же через margin все картинки, и с помощью z-index перекрыть в нужной последовательности. Я ищу какие либо еще варианты, может где-то что-то не дочитал или о чем то не знаю. у вас есть еще идеи как это сделать...?

[Ankhena]

Тимур,

просто такое задание

Покажите как выглядит задание на самом деле?

Есть ли какойто вариант или свойство чтоб я мог закидывать в родительном блоке (flex) другие блоки.

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

У меня еще есть как вариант через position absolute и просто сместить так же через margin все картинки

Если уже абсолют, то зачем margin? Так и смещайте с помощью top, left, right, bottom.

у вас есть еще идеи как это сделать...?

Да, писала выше, гридами

[Тимур]

Ankhena,

Покажите как выглядит задание на самом деле?

https://www.figma.com/file/RzhixNEpyRImuPIBkbb1Av/...

я на моменте где там пчелки которые на скриншоте

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

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

Если уже абсолют, то зачем margin? Так и смещайте с помощью top, left, right, bottom.

ну типо так думал не правильно будет))

Да, писала выше, гридами

нашел свойство transfarm: translate (10px 10px)

[Вадим]

Тимур,

ну типо так думал не правильно будет

не правильно делать это флексами.(в подходах к вёрстке конечно нет прям супер строгих правил, если браузер отрисовывает Вашу вёрстку как надо и это решает бизнесс задачу, но всё же).

Нет ничего не правильного в том, чтобы использовать свойства для позиционирования для... позиционирования.

Можно не объединять эти картинки в одну, а воспользоваться множественным фоном и спозиционировать фон с пчёлами как нужно относительно фона с мёдом.

Вы так и не показали как выглядит задание. Вы показали как выглядит макет.

[Вадим]

Тимур, у Вас тут на макете блок, в котором:

• фоновая картинка (возможно множественная, хотя не понятно зачем)
  
• Колонка(вот это можно сделать флексами с flex-direction: column) в которой:
  
  • текст
    
  • Контейнер с кнопками (тоже можно сделать display: flex)
    
    • Сами кнопки.
      
    
    
    
  
  
  

а ну и сверху header, который тоже можно сделать display: flex

[Ankhena]

Тимур, Тимур, это макет, а не задание.
Покажите, пожалуйста, задание, где оно запрещает слить картинки в одну и говорит, что они должны быть контентными?
А также про то, что это нужно делать флексами?

[Ankhena]

Тимур,

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

Флекс не для этого.
В нем инструментов для наложения оного элемента на другой.

Все свойства, которые могут быть использованы для наложения, к флексам отношения не имеют.
Да, вы можете использовать их совместно с флексом при необходимости. Только это не будет называться "наложил элементы друга на друга с помощью флексов"

[Тимур]

Вадим,

Вы так и не показали как выглядит задание. Вы показали как выглядит макет.

задание надо сверстать такой же макет, максимально близко к оригиналу.

я тоже думал в фотошопе объединить просто все три картинки надпись прозрачную пчелок и там кружочки и ее как бэкграунд сделать, а потом 2 дива флексами, 1 див с надписями, 2 див с кнопками.

подумал слишком просто будет, да и плюс команды такие как z-index еще не проходили)

я делаю домашку другого человека, и они на занятиях не изучали еще такие команды, учили transform translate, позиционирование и вот я ищу вариант какой-то))

[Вадим]

Тимур,

я тоже думал в фотошопе объединить

Зачем, если можно сразу импортировать из фигмы всё в одном файле?
К слову, с точки зрения оптимизации градиентный фон можно нарисовать на css - сильно облегчит картинку.

В скинутой фигме пчёлки и мёд итак одной картинкой сделаны.

подумал слишком просто будет

Так Вам шашечки, или ехать? Зачем усложнять и из простого делать лажу с отрицательными маргинами?

плюс команды такие как z-index еще не проходили

Для предложенного, да и описанного Вами же решения z-index не нужен.

Ну и даже если делать надпись "honey" отдельно, то z-index тоже не обязателен. Можно управлять порядком элементов на основе их порядка в DOM.

[Тимур]

Вадим, что такое DOM? если сделать по отдельности 2 картинки подскажите как это правильно сделать?

[Тимур]

Вадим, подскажи вот есть структура кода такая

https://codepen.io/Qwertymor/pen/poLmzKv

как можно наложить картинку на картинку в этом блоке?

чтоб было как на макете!!!