z-index with two relative positioned elements IE7

Question

Hi, I have two elements. One is a searchbox that has to be positioned relatively. The other is an image I would like to overlap part of the search box and it has to be positioned relatively as well. No matter what I set the z-index to, IE7 won't overlap the image. It goes underneath the searchbox. It overlaps and works in Firefox though. Help? Thanks

Answer 1

z-index will only come into play when the element is positioned absolutely. Something you could try would be to have the image positioned absolutely and wrapped in a relative-ly positioned div, since the position is taken from the parent element.

Hope that's clear, let me know if you need more detail

Answer 2

Are you trying to put an image on top of a text input field? That should probably not work very well even if Firefox might allow it.

Clicking the field to enter some search text into it would select the image instead. Please elaborate on why you would want to put the image above a text input? If all you see is the image at some part, there is really no need for the text input to be under the image there?

Answer 3

There is a z-index bug in IE7.

This may help: http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/64774ff1-1cce-4666-a2c7-9a899994aaef

Answer 4

We need some code to look at. If your structure is something similar to this:

`<div style="z-index: 1">`  
  `<input style="z-index: 1; position: relative;" type="text" name="search" />`  
  `<img style="z-index: 2; position: relative;" >`  
`</div>`

It should work.