title: how to position an element on top of another element?
body: <p>I have a menu and a search box. I would like to put the search box along with menu items. But my menu is being built in a different file in a div called 'custommenu' which uses the following css:</p>
  
  <pre><code>#custommenu {
    position:relative;
    z-index:999;
    font-size: 14px;
    margin: 0 auto;
    padding: 10px 16px;
    width: 918px;
    background-color: #FB0A51; 
    border-top-left-radius: 10px 10px; 
    -moz-border-top-left-radius: 10px 10px;
    border-top-right-radius: 10px 10px; 
    -moz-border-top-right-radius: 10px 10px;
  }
  </code></pre>
  
  <p>Whereas I have my search box in a separate file which looks like this:</p>
  
  <pre><code> &lt;div class="header"&gt;
     some code
     &lt;div class="quick-access"&gt;
        some code
     &lt;php echo $this-&gt;getChildHtml('topSearch') ?&gt;;
     &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>I tried adding the following to the css file so that the search box comes on top of the menu but it did not work</p>
  
  <pre><code> .header .form-search { 
     position:absolute; 
     right:29px;  
     z-index:1000; 
     top: 80px;  
     width:315px;  
     height:30px;  
     padding:1px 0 0 16px; 
   }
  </code></pre>
  
  <p>Still the search box gets hidden behind the menu. I would like to have the search box n the menu. How do i do it?</p>
  
  <p>EDIT: Here's the css of the div's which contains the search box,</p>
  
  <pre><code> .header { width:930px; margin:0 auto; padding:10px; text-align:right; position:relative; z-index:10; border-top:3px solid #3C3C42;}
   .header .quick-access { float:right; width:600px;margin-top:-125px; padding:28px 10px 0 0; }
   .header .form-search { position:relative; top: 100px;left: 300px; z-index:9999; width:315px; height:30px; padding:1px 0 0 16px; }
  </code></pre>
  
  <p>And this is how it looks right now, (purple links - quick access, white box is search which is going behind the pink 'custommenu' area. I would like to have the white box on the pink area. And all of this is inside 'header')</p>
  
  <p><img src="https://i.stack.imgur.com/iz3Oy.png" alt="z-index issue o/p"></p>