Layering items using Flexbox

HTML-CSS
1

Hi all, I am trying to reproduce title screen of this site using Flexbox: https://sswitch.ch/

https://zelenskaya.github.io/experiments/sswitch/sswitch-home-flexbox.html

I organized background photo, picture of athlete, and text, as a column. I am using z-index but I still cannot get the items to go in layers.

I reverse engineered the code and if use “position” like on the original site, I can more or less make it work: https://zelenskaya.github.io/experiments/sswitch/sswitch-home-andrew.html

I still think I can layer items on top of each other. Am I wrong?

Thanks!
Anna

2

Flexbox is used for laying out a line of elements (in one row or column), and provides tools to space them out or make them fill the available space automatically or whatever. It’s not designed for laying things on top of each other, that’s not the point of it. position is the tool for doing that, the combination of relative and absolute. The containing element you put all of that into, that can be part of a flex layout, but inside that element you’re going to want to set position:relative then use position:absolute on the the image of the man. Possibly on other stuff, it depends how you want it to work (the image of the room could be a background image, or it could not be, and if it isn’t you need absolute to get the overlay effect)

1 Like
3

Thank you very much. I have fixed based on your suggestion. Could you help me find a way to move bottom edge of the athlete and the background below scroll?

I managed to align bottoms of the athlete and background image. But they are too high. I tried to fix this by setting height of their parent class, #title_screen, to 1100px, but it does not help.

Thanks so much!
Anna