flexbox z-index

[mreider]

I am trying to create a flexbox layout where I have a title in the center horizontally and vertically and then a image set to flex-end, but I can’t seem to get the z-index to work correctly so the title overlaps the flex-end image.

Here is the code pen of where I am at.

http://codepen.io/mreider/pen/bpmNYE

[Paulie_D]

Exactly what is this supposed to look like? If you’re using z-index…is the heading supposed to overlay the image or what?

That said I do see some issues, you have span elements holding block level headings…that’s a no-no right there.

…and why do you need the span anyway, you have a perfectly good flex-container with the anchor.

[Paulie_D]

Basically, flexbox doesn’t do overlays (if that’s what you are trying to do)…only positioning will do that….so let the image be and position the header absolutely on top.

http://codepen.io/Paulie-D/pen/jqePYx

[Author]

Posts