Issue with HTML/CSS around Top Nav Bars and Textbox and Image positioning

Question

I'm having an issue here with a textbox that is located on a top navigation bar for a site I'm building.

Below will help to paint a little picture of what it looks like:

http://i34.tinypic.com/24w4uja.png

I also have a image file which is sitting about half way between both of these navigation heigh wise.

To the right I have a textbox which is somewhat aligned with the image file that is shown to the left. The issue that I'm having is that the textbox field is not able to be clicked in at or above where the red line starts in my picture.

I've tried setting a z-index on the textbox to get it to sit on top of everything, but I've had no luck at all yet trying to figure this issue out.

I want to have the image stay where it's at, but I simply want to be able to click anywhere in the textbox to be able to enter text.

I'm obviously not an expert at HTML/CSS - but I would greatly appreciate help on fixing this issue.

Best regards and thanks in advance for your time!

Answer 1

Your elements are likely in different stacking contexts. If one has a position or opacity property and the other does not, the z-indices will be out of context and will not respond to their relative values.