Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Katia De Juan Bayona
Katia De Juan Bayona
6,757 Points
Posted by 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
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
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.