View Full Version : layering elements without z-index?

04-03-2011, 07:28 AM
I'm a designer who is new to coding.

In my site I was originally using z-index and padding to positions all my images. However, as I've discovered is a common problem, the images that are linked do not function if they are positioned underneath another element.

Is there a way to separate the <a> tag from the div id so that the links still function without losing my positioning.

Or otherwise is there another way to have elements overlap without using z-index?

04-03-2011, 09:22 AM
You can use css positioning instead of z-index to layer elements and in that case they will be stacked in the order they appear in the html.

But if the top image completely covers the images below it, I'm not sure the links in the lower images can become active when the top image is hovered over.

You might have to offset the layered images a bit so that each image is exposed slightly. Clicking on any exposed bit of each image will then activate the link for that image.

04-04-2011, 09:39 PM
I have my background image placed absolutely with z-index:0;

Everything else is positioned relative to that. However I seem to only be able to overlap my z-index:1; on top of the background. My z-index:2; 3 4 5 etc will not lay on of my first absolute element, but rather they are laying relative to my z-index:1;

04-04-2011, 09:41 PM
I tried layering things based on css-positioning/order only, my elements do not overlap each other, but rather they appear as a "list" from the top of the page to the bottom.