Question

I have a theme image which I am getting from an infopath and proccessing through xslt. I am using this image as a theme for header of my site. Here is my current structure

<div id="mainContent"> <a href="http://xyz.com">testlink</a></div>
<div id="theme"><a href="http://aaa.com"><img src="abc.jpg" /></a></div>

I am placing my theme behind my header bar by position:absolute and z-index:-1

Now my issue is, I have to make this theme image clickable. However if I have a link on mainContent div, that should also work. Also I can’t use image as background as I have to make image path configurable (through infopath) and can’t hardcode it in css.

In IE browser, above structure worked fine as IE allow us to access lower z index div, and I can click it. however other browser are not. I require a universal solution which should work in IE 7+ and latest version of Firefox, Chrome and safari

Note: I am new in posting question on the forum, so please let me know in case anything is not clear in my question

Answer 1

If you can change your html, a solution is to put the theme div first, and put both divs in position:absolute. You don’t need z-index then.

A simple example can be found here: jsFiddle example.

The css code being :

#theme {
    position: absolute;
    top:0;
    left:0;
}
#mainContent {
    position: absolute;
    top:0;
    left: 0;
}

Other method inspired by This answer : Set the theme image as part of the mainContent div, with position absolute and z-index set, and everything else with position relative and a larger z-index. See this example.