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.
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.