The “Ah-Ha!” moment with a Z-index issue

Just thought I would briefly talk about the CSS function “z-index” (For those unaware, its basically layer level or order in which objects sit on top of each other on the screen).

Here’s a useful visual example of Z-index:

Anyway, I was having a really hard time getting an image (a logo, specifically) to sit behind a text description, but on top of a background image.

1. DESCRIPTION
2. LOGO
3. BACKGROUND IMAGE

I set my z-index according… and nothing. I thought for awhile it had to do with WHERE I put the image in the string of HTML elements. Perhaps all the elements had to be in the same id group? Nope. Finally, I popped over to wc3schools.com (great resource for designers/coders btw) and began to read how z-index works… and still didn’t see what i was doing wrong. It *SHOULD* be doing what I want. That was, until i read this little gem: “Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).”

Wait. a. second. I wonder if… yup. My description had no positioning information (which defaults to static). Added position: relative to my description, refreshed and BAM everything snapped into proper place.

Ah-ha! Probably an issue with z-index web design people run into everyday, but Im happy to know how to solve it next time.

Leave a Reply

Your email address will not be published. Required fields are marked *