how to position an element on top of another element?

Question

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:

#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;
}

Whereas I have my search box in a separate file which looks like this:

 <div class="header">
   some code
   <div class="quick-access">
      some code
   <php echo $this->getChildHtml('topSearch') ?>;
   </div>
 </div>

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

 .header .form-search { 
   position:absolute; 
   right:29px;  
   z-index:1000; 
   top: 80px;  
   width:315px;  
   height:30px;  
   padding:1px 0 0 16px; 
 }

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?

EDIT: Here's the css of the div's which contains the search box,

 .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; }

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')

Solution 1

@all

Sorry for replying very late. But I found the solution after a little bit of fiddling. I set the z-index of my header to a higher value than my custommenu. Since my header contains the search box it needed to have a higher value for the search box to come over the menu.

The code looks like this now

.header{ position: relative; z-index: 4000; }
 .header search { position: relative; z-index: 99999; }
.custommenu { position: relative; z-index: 1000 ;}

This perfectly got my search box on top of my menu aligned. Thanks again for all those who helped. Appreciate it.

Solution 2

Try with float? or display:block;
If I was using this code, I would write the css like this:

position:relative;
left:some value;
top:some value;
Z-index: -999

Comments

[Sreeni Puthiyillam]

use float:left to parent element. and if u want down this. do clear both. if u do0nt like float: go with:display:inline-block;<br> and *display:inline;<br> and Zoom:1;

[ivn]

float doesn't work because it moves the 'quick-access' div too. I want to only move the search box which is represented by '.header .form-search'

[ivn]

That dint work. I have attached the screenshot and elaborated my problem more, if that gives you any ideas.

[Symeon Breen]

Hi is there a public url where we can look at this. - I can see It is the pink box that is on top of the search box. These are usually pretty easy to fix once it is looked at with something like firebug or developer tools etc

[ivn]

I am afraid its on my localhost and hence I cannot provide you any public url to have a look at this. However, if you could tell me which elements u suspect might be causing the problem, I can look up in firebug and can write it back about them here.