Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Katia De Juan Bayona
Katia De Juan Bayona
6,757 Points

How can I achieve this result with Flexbox?

I'm learning how to make different layouts with Flexbox, and I was wondering how is it done to stack a text on top of an image, being the image aligned to one side and the text on the other, like on these samples below? One of the samples is from Codepen but somehow, I'm getting lost at figuring out how did they managed to do it.

https://dribbble.com/shots/2220487-TKC-Homepage-WIP/attachments/412412 https://dribbble.com/shots/3415631-VISSLA-Redesign-Concept-Sneak-Peek https://dribbble.com/shots/3158257-C-O-N-T-E-X-T-Tranquil-Style-Tile https://dribbble.com/shots/2563974-Rob-Machado https://codepen.io/waldo/project/full/ZbVVob/

Thanks a lot in advance! ^_^

Katia De Juan Bayona
Katia De Juan Bayona
6,757 Points

Just realised... would it be achieved by using z-index? And if so, would this be the best choice to do it?

1 Answer

Benjamin Larson
Benjamin Larson
34,055 Points

The text overlay/alignment that I believe you are referring to is being accomplished by using the CSS position property with a combination of relative and absolute positioned divs.

This method (as utilized in the codepen example) is mostly unrelated to flexboxes. While you might be able to achieve this effect entirely with a flexbox, I don't personally think it's a good use-case for doing so. If there was a reason for the overall layout to use flexbox, I would take the unit of relative and absolutely positioned divs that make up that section and make the parent item a flex-item. That makes sense in my head but I'm likely not communicating it well haha.

As you noted, you may need to use the z-index to make sure the text is in front of other elements but the positioning will be the greater challenge.