I have a webpage which has a drop down menu list on the top portion and an iframe few inches below it.The iframe displays others jsp pages depending on the menu choice from the drop down list.

However I have noticed a problem when sometimes when the iframe is displaying a jsp page which has text field etc..(in my case SELECT) in the top portion of the page. The dropdown menu is geting overlapped by the text field in other words the menu list doesn't show properly in that area.

I have heard about changing z-index in css file to a value which would help in deciding which element should overlap in front.I have tried setting this value to different ranges but have noticed no difference.If anybody has faced this issue please let me know of what could be the solution.