How do I make these layers not overlap?

Question

http://removed.com/jquery/test.html#

I have three problems that I need help with.

1 ) When you click "More" on top right, it open a div #search and the background is being overlapped by the brown element below. I tried using z-index, but it didn't work.

2 ) I'm trying to make the div #search align directly beneath the "More", but upon setting the width of #search, it aligns to the left side.

3 ) When I hover over the navigation on the left, the popup is being overlapped by the text in the middle. I want the popup to be on top of the text.

Answer 1

Try giving the position:relative to element with id #search and set its z-index to a greater value such as 100